如何使用 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 开发环境，以便它可以与 http://localhost:80 上的 Silex 框架和 http://localhost:8080 上的热重载 webpack 开发服务器一起使用，并且仍然能够通过打开 http://localhost/ 来运行应用程序

Answer 1

我使用Laravel，但是，在我的设置中并没有任何特定于 Laravel 的东西，所以这对你来说应该是一样的，只是对你的文件存储位置进行了一些调整：

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

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

我实际上将它放在基于环境变量的条件中，所以它只在我的开发系统中执行此操作并在生产中加载捆绑的 js。

接下来，您需要确保您的 webpack 开发配置具有从 webpack-dev-server 提供的 app.js。你可以使用publicPath 来做到这一点，它应该指向你的javascript文件所在的目录：

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

出于我的目的，我还将路径设置为 public/js，因为这是我的 app.js 文件相对于 webpack 配置的位置，因此只需将其设置为 js 文件捆绑在 silex 中的任何位置.

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

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-run-all 将 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 访问您的网站