Vue-cli 生产环境配置

基本思路

• 运行npm run deploy，一键npm install && node build/build.js && pm2 startOrRestart pm2.json
• build.js通过webpack将前端程序打包压缩成js放在dist中，并根据config/index.js中的配置填充了index.html
• pm2是node的守护进程，方便管理
• pm2 运行build/prod-server.js，开启express的web服务，api访问也能代理
• prod-server.js和dev-server.js类似，只是不需要热加载

几个重要的配置

• build/prod-server.js

var path = require('path')
var express = require('express')
var config = require('../config')
var proxyMiddleware = require('http-proxy-middleware')

var port = process.env.PORT || config.dev.port
var proxyTable = config.dev.proxyTable

var app = express()

app.use(require('connect-history-api-fallback')())

Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})

app.use('/', express.static('./dist'))

if (process.env.NODE_ENV === 'production') {
    process.on('uncaughtException', function (err) {
        sentry.captureError(err);
    });
}

module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + port + '\n')
})

• config/index.js 中配置好proxy
• pm2.json

{
  "apps": [
    {
      "name": "project_name",
      "script": "build/prod-server.js",
      "instances": "max",
      "log_date_format": "YYYY-MM-DD HH:mm Z",
      "max_memory_restart": "500M",
      "exec_mode": "cluster",
      "env": {
        "NODE_ENV": "production"
      }
    }
  ]
}

• 在package.json中添加scripts，一键发布

  "deploy": "cnpm install && node build/build.js && pm2 startOrRestart pm2.json"

说明

• 如果需要上传到七牛，装一个插件，配置一下webpack即可
• 由于我这边是上传到qiniu的，没有实验本地dist的静态资源，如果有问题，再一起讨论