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

Question

我正在使用 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 run build

npm run dev

Answer 1

npm run build 创建一个 dist 目录，其中包含您的应用程序的生产版本。

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

例如serve:

npm install -g serve
serve -s dist

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

serve -s build -l 4000

文档：

Answer 2

使用 express 非常容易，而且 extensible/configurable。

安装

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

Answer 3

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

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

1) 通过以下命令安装精简版服务器

$ 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

Answer 4

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

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

Answer 5

Vue CLI 工具 (vue-cli-service serve --mode production) 似乎仍在为我提供开发文件，尽管 process.env.NODE_ENV === 'production'。

为了提供 dist 的内容，以下对我有用 而无需安装任何额外的包 ：

npm run build
npx serve dist

使用自定义端口和 SSL key/certificate:

npx serve dist -l 8095 --ssl-cert .\cert.pem --ssl-key .\cert-key.pem

您也可以将此命令放入您的package.json，例如

  "scripts": {
    "serve": "vue-cli-service serve",
    "prod": "npx serve dist",
    ...
  }

然后就这样做：

npm run prod

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

How to run production site after build vue cli

node.js

vuejs2

production-environment

vue-cli

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

How to run production site after build vue cli

node.js

vuejs2

production-environment

vue-cli

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