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

Question

我正在尝试将Vue2配置为在本地开发环境上与Silex框架应用程序一起运行。我使用CLI工具创建了Vue应用程序。将/build/dev-server.js中的open从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开发环境，使其能够在http://localhost:80和webpack dev服务器上使用Silex框架，在http://localhost:8080上进行热重加载，并且仍然能够通过打开http://localhost/来运行应用程序。

Answer 1

然而，我使用的是Laravel，但是在我的设置中没有任何特定于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配置的位置，所以只需将其设置为js文件被打包在silex中的任何位置。

现在，您只想配置dev服务器：

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
},

然后，我使用package.json向npm-全面运行添加一个npm脚本--再次指向我的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访问站点