5

我从一个名为vuetable-2的 Larvavel + Vue 组件开始下载（顺便说一句，非常好）。

首先，php artisan serve作品。一切都很好，除了它不会对 .vue 文件进行热部署更改。

我终于要开始npm run hot工作了，但是，当转到该页面时，我收到了浏览器消息：

不能获取 /

所采取的行动：

  • 检查了我的依赖项，据我所知，一切都是正确的。
  • 删除 node_modules 并 rebuit（现在 3 次）npm install
  • 创建了一个单独的测试项目来确认 Vue 是否热重载（确实
    如此）

我怀疑问题出在某处的某些配置上，但是对于我的生活，无法弄清楚在哪里。

我发现的唯一奇怪的事情是，webpack.config.js它说它会使用port 3000，但是，似乎在使用 artisan 时唯一有效的端口是 8000，或者运行 dev hot uses 8080会产生上述消息。

但是，如果我对文件进行更改，我会得到漂亮的 Laravel Mix toast，告诉我构建是否成功，但在浏览器中看不到它们。webpack.config.js也具有正确的构建路径，即public/.

这是我的 package.json 文件：

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=./webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=./webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=./webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=./webpack.config.js"
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.4",
    "laravel-elixir": "^4.0.4",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.2",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.2.4"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "jquery": "^3.1.1",
    "accounting": "^0.4.1",
    "vue-events": "^3.0.1",
    "vue-masked-input": "^0.4.1",
    "vue": "^2.1.10",
    "vuetable-2": "^1.3.1"
  }
}

该webpack.config.js文件与安装的标准文件相同。

4

2 回答 2

3

对于仍在寻找答案的任何人

将此添加到 webpack.mix.js 文件中

let mix = require('laravel-mix');

mix.webpackConfig({
    devServer: {
        proxy: {
            '*': 'http://localhost:8000'
        }
    }
});

运行后端服务器 ( php artisan serve)，然后npm run hot. 这会将所有前端请求代理到后端，以便正确处理文件。更多信息在这里

话虽如此，npm run hot应该在没有开发人员修改的情况下工作。

来源https://github.com/JeffreyWay/laravel-mix/issues/2057

于 2020-05-06T09:53:18.950 回答
0

看来你错过了跨环境的路径......试试这个：

"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

我已经删除了你的"dev": "npm run development",and "prod": "npm run production",。如果您想更改命令，只需更改它们。

希望它有效。

于 2017-04-15T01:22:29.170 回答