构建 vue cli 后如何运行生产站点答案

【问题标题】：How to run production site after build vue cli构建 vue cli 后如何运行生产站点
【发布时间】：2018-04-12 13:35:13
【问题描述】：

我正在使用 VueCLI 2 并构建为生产环境。 build.js 被构建并编译成 200KB。当我重新运行服务器作为开发时，它加载了 3MB。我确定 dist 文件夹中的 build.js 是 200KB。我试图打开 index.html 但它不起作用并重定向到网站上的根目录。

Package.json

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

Webpack

module.exports = { ...
module:{
 ...
 plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
 ],
 devtool: '#eval-source-map'
},
...
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
   new webpack.DefinePlugin({
    'process.env': {
     NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compress: {
     warnings: true
    }
  }),
  new webpack.LoaderOptionsPlugin({
    minimize: true
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module) {
      return module.context && module.context.indexOf('node_modules') !== -1;
    }
  })
 ])
}

HTML

<body>
  <script src="/dist/vendor.js"></script>
  <script src="/dist/main.js"></script>
</body>

命令

npm 运行构建

npm 运行开发

【问题讨论】：

标签： node.js vuejs2 production-environment vue-cli

【解决方案1】：

npm run build 使用您的应用的生产版本创建一个 dist 目录。

为了在浏览器中提供index.html，您需要一个 HTTP 服务器。

例如serve:

npm install -g serve
serve -s dist

默认端口是5000，但可以使用-l 或--listen 标志进行调整：

serve -s build -l 4000

文档：

【讨论】：

非常感谢搜索了很久。虽然图像没有被加载。知道为什么吗？
值得一提 - 默认端口是 5000 - 如果你想监听不同的端口使用标志 -l serve -s dist -l 8080
@PrathameshAware：你解决了图像加载问题吗？我也有同样的问题！
它可以工作，但端口总是 5000。你知道我怎样才能把它改成别的吗？？
我在使用 serve 包运行生产构建时遇到了 CORS 问题，但在开发构建中没有。知道如何解决这个问题吗？

【解决方案2】：

生产构建可以通过使用 Vue CLI 的工具在本地运行，只需运行：

vue-cli-service serve --mode production

为方便起见，可以将其添加到 package.json 脚本中：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "production": "vue-cli-service serve --mode production"
  }

命令：

$ npm run production

【讨论】：

谢谢，工作正常！

【解决方案3】：

使用express 非常简单，并且具有高度可扩展性/可配置性。

安装

npm install -D express

撰写

server.js

// optional: allow environment to specify port
const port = process.env.PORT || 8080

// wire up the module
const express = require('express') 
// create server instance
const app = express() 
// bind the request to an absolute path or relative to the CWD
app.use(express.static('dist'))
// start the server
app.listen(port, () => console.log(`Listening on port ${port}`))

执行

node server.js

【讨论】：

你知道 express（相比 serve）对于静态文件服务有什么好处吗？
复杂度越高，自定义度越高

【解决方案4】：

构建应该部署到服务器上，因此，我认为 vue-cli 中没有任何内置方式可以在本地运行构建。

要在本地运行构建，我们需要单独配置服务器并在服务器上运行构建，如下所示，

1) 通过以下命令安装 lite 服务器

$ npm install -g lite-server

2) 在 package.json 中添加以下脚本

"lite": "lite-server –port 10001",    
"start": "npm run lite"

3) 在根目录下创建 bs-config.js 文件并添加以下脚本

module.exports = {
  port: 3000,
  server: {
    baseDir: './dist'
  }
}

4) 最后，通过下面的命令运行它

$ npm run start

【讨论】：