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

Question

我正在尝试在本地开发环境中使用 Silex 框架应用程序将 Vue2 配置为运行。我使用 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 应用程序运行s，我看到了我的内容（所以 webpack 开发服务器运行s）。问题是它不热重载。当我检查浏览器控制台时，我看到该应用程序不断尝试打开 http://localhost/__webpack_hmr.

所以问题是，如何配置 Vue 开发环境，使其在 http://localhost:80 and webpack dev server with hot reload on http://localhost:8080 and still be able to run application by opening http://localhost/

上与 Silex 框架一起工作

Answer 1

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

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

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

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

接下来你需要确保你的 webpack 开发配置有 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.

中

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

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

访问您的站点

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

How to configure Vue2 environment with Silex or other PHP framework

silex

webpack

vue.js

vuejs2