Question

试图弄清楚如何使用webpack创建生产版本，但首先在本地运行它作为最后的测试，然后再将其部署到服务器上。

我当时正在考虑创建另一个类似npm run build_local的命令，但还不知道该怎么做。

我可以在根package.json中看到以下内容，并且我正在考虑以某种方式将dev + build组合在一起，但不知道如何做到这一点（或使用config）：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

关于如何使用npm run build_local命令在localhost中运行生产构建的任何建议？

编辑

到目前为止，我尝试过的操作是（手动）运行http-server ./dist，它似乎在本地主机上运行该文件夹，但是结果实际上偏离了生产（和开发）行为-就我而言，它首先呈现一切都按预期进行，但是只要按刷新，它就会返回404 not found，这是意外的（在开发人员和服务器部署的版本中，在这种情况下，它仍会显示登录页面）：

例如，如果我打开localhost:8080，vue会将我重定向到localhost:8080/login，这是正常的并且可以正常工作。刷新后，它会给出404。

理想情况下，我希望它至少可以与在localhost上进行开发的方式相同。

有什么想法吗？

Answer 1

因此，就像组合dev命令并在根prod下提供package.json配置一样简单：

    "build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
    //

或者在package.json中：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
    "build_local": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js"
  }

现在我可以做npm run build_local，它可以在本地主机上运行生产版本

注意：按照this github thread和this doc reference的规定，为防止刷新404，还将以下内容添加到您的webpack.prod.conf.js（文件中的任何位置，但仅供参考）您可以将其粘贴在plugins之前

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    historyApiFallback: true, //this line is requried
    compress: true,
    port: 9000
},

您现在可以在localhost:9000下查看生产版本

如果有人知道有任何缺点，请给我评论或发布正确的答案

Vuejs + Webpack-为生产而构建，但部署到本地主机

1 个答案: