如何使用Silex或其他PHP框架配置Vue2环境

我试图将Vue2配置为在本地开发环境中与Silex框架应用程序一起运行。我使用CLI工具创建了Vue应用程序。将/build/dev-server.js中的打开URL从http://localhost/+port更改为http://localhost/，因此npm run dev将打开Silex应用程序。并在php视图中添加了以下脚本url：http://localhost:8080/app.js。如何使用Silex或其他PHP框架配置Vue2环境

现在，当我运行npm run dev时，浏览器中的新选项卡将使用url http://localhost/创建。 Vue应用程序运行，我看到我的内容（所以webpack开发服务器运行）。问题是它不会重新加载。当我检查浏览器控制台时，我发现应用程序不断尝试打开http://localhost/__webpack_hmr。

所以现在的问题是，如何配置Vue公司的开发环境，它会与Silex的框架用热装载的http://localhost:80和的WebPack dev的服务器上工作http://localhost:8080，仍然能够通过打开http://localhost/

来源

2017-10-21 Artur Stępień

我用来运行应用程序但是，在我的设置中没有任何特别的Laravel特有的东西，所以对于存储文件的任何位置，这应该是相同的：

首先，您需要确保您的脚本正在从webpack-dev-server加载，所以：

<script src="http://localhost:8080/app.js"></script>

我实际上已经把它置于一个基于环境变量的条件中，所以它只在我的开发系统中做到这一点，并且在生产中加载了捆绑的js。

接下来，您需要确保您的webpack dev配置app.js来自webpack-dev-server。你可以做，使用publicPath这应该指向你的JavaScript文件正在从服务的目录：

output: { 
    path: path.resolve(__dirname, '../../../public/js/'), 
    publicPath: 'http://localhost:8080/js/', 
    filename: 'app.js' 
},

对于我而言，我还设置了路径public/js因为那是我的app.js文件是相对于webpack配置，所以只需将它设置为silex中js文件的任何位置即可。现在

，你只是想配置开发服务器：使用npm-run-all

devServer: { 
    hot: true, // this enables hot reload 
    headers: { "Access-Control-Allow-Origin": "*" }, 
    host: "localhost", 
    port: 8080, 
    contentBase: path.join(__dirname, "../../../public"), // points to Laravel public folder 
},

我再添加一个NPM脚本package.json - 再一次，我指着我的PHP服务器的public文件夹：

"scripts": { 
    "serve": "php -S localhost:80 -t public, 
    "hmr": "webpack-dev-server --env=webpack.dev", 
    "dev": "npm-run-all --parallel hmr serve" 
}

现在你应该能够做到：

npm run dev

来启动这两个服务器，然后访问您的网站从http://localhost:80

来源

2017-10-21 14:11:54

我的package.json看起来有点不同。看看这个：''scripts'：“dev”：“node build/dev-server.js”， “start”：“node build/dev-server.js”， “build”：“node build /build.js“， ”lint“：”eslint --ext .js，.vue src“ }，'我希望保持此设置尽可能接近库存配置，同时保持其按预期工作。 –

在vue webpack中，他们只是运行一个节点脚本来启动服务器并进行一些其他初始化。使用[Api proxying]（http://vuejs-templates.github.io）可以运行特定的开发过程/webpack/proxy.html），它看起来像通过[express]（https://www.npmjs.com/package/express）来完成，以避免CORS问题。当然，这仍然要求您提供webpack dev服务器中的所有内容，而不是PHP服务器，这意味着您不能使用Twig，并且需要通过'.html'文件挂载您的应用程序，这可能很好取决于你的设置。 –

谢谢@craig_h，您的回答指出我朝着正确的方向发展，我的解决方案与您的解决方案大约相当，如此接受您的90％。 –

如何使用Silex或其他PHP框架配置Vue2环境

回答

相关问题