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

Question

我试图将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。

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

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

Answer 1

我用来运行应用程序但是，在我的设置中没有任何特别的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