vue 多环境开发的配置

默认安装vue时只有开发跟生产的环境，需要添加多个自定义的环境时，需要自行添加多个.env文件在根目录里

定义需要的.env文件

如需要添加测试环境,在根目录上添加.env.test文件，里面定义测试环境需要的变量

在package.json中添加上新增加的test环境的启动命令

我这里定义启动测试环境的命令是serve-test，该名字是自定义

vue.config文件可以根据不同的环境来配置不同的设置

• ENV: 环境变量
• host: 域名
• port: 端口号
• https: 协议
• proxy: 代理

const fs = require('fs')
const path = require('path')

// 开发环境 HTTPS 配置
const DEV_HTTPS = {
  requestCert: false,
  // 请求客户端证书，即双向认证
  // requestCert: true,
  key: fs.readFileSync('./certs/dev/SERVER.pem', 'utf8'),
  cert: fs.readFileSync('./certs/dev/SERVER.crt', 'utf8')
}

// 测试环境 HTTPS 配置
const TEST_HTTPS = {
  requestCert: false,
  // 请求客户端证书，即双向认证
  // requestCert: true,
  key: fs.readFileSync('./certs/test/server.pem', 'utf8'),
  cert: fs.readFileSync('./certs/test/server.crt', 'utf8')
}

// mock api 端口
const MOCK_API_PORT = 9528

// 应用前端端口
const APP_FE_PORT = process.env.VUE_APP_FE_PORT

const APP_NAME = '项目名称****'

const ENV = process.env.NODE_ENV

const APP_HOST = ENV === 'test'
  ? '测试域名'
  : '开发域名'

const HTTPS = ENV === 'development'
  ? DEV_HTTPS
  : ENV === 'test'
    ? TEST_HTTPS
    : undefined

const config = {
  publicPath: '/',

  lintOnSave: ENV !== 'production',

  productionSourceMap: false,

  devServer: {
    host: APP_HOST,

    before(app) {
      app.all('*', (req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*')
        res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
        res.header('Access-Control-Allow-Credentials', 'true')
        next()
      })
    },

    disableHostCheck: true,

    // 热更新
    hot: true,

    // 端口配置
    port: APP_FE_PORT,

    https: HTTPS,

    // 自动浏览器打开
    open: true,

    overlay: {
      warnings: false,
      errors: true
    },

    // 路径匹配
    // 根据不同的前缀，转发到不同的服务器上
    // detail: https://cli.vuejs.org/config/#devserver-proxy
    proxy: {
      '/rest/tf/auth/': {
        target: process.env.VUE_APP_API_PROXY,
        changeOrigin: true, 
        logLevel: 'debug',
        secure: false,
        headers: ENV !== 'production' ? { 'X-SSL-Client-Verify': 'SUCCESS' } : undefined,
      },

      // rest
      '/rest/': {
        target: process.env.VUE_APP_API_PROXY,
        changeOrigin: true,
        logLevel: 'debug',
        secure: false,
        headers: ENV !== 'production' ? { 'X-SSL-Client-Verify': 'SUCCESS' } : undefined,
      },

      // 本地 nodejs 的 mock 数据
      '/mock': {
        target: `http://localhost:${MOCK_API_PORT}/`,
        changeOrigin: true, 
        ws: true 
      }
    }
  },

  pwa: {
    name: APP_NAME
  },

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, 'src/styles/_variables.scss'),
        path.resolve(__dirname, 'src/styles/_mixins.scss'),
        path.resolve(__dirname, 'src/styles/element-variables.scss')
      ]
    }
  },

  chainWebpack(config) {
    config.set('name', APP_NAME)

    config.when(process.env.NODE_ENV !== 'development', (config) => {
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },

          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
          },

          commons: {
            name: 'chunk-commons',
            test: path.resolve(__dirname, 'src/components'),
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      config.optimization.runtimeChunk('single')

      // 配置预加载，加快首屏访问
      // config.plugins.delete('prefetch')
      // config.plugin('prefetch').tap(options => {
      //   options[0].fileBlackList = options[0].fileBlackList || []
      //   options[0].fileBlackList.push(/myasyncRoute(.)+?.js$/)
      //   return options
      // })

      // 性能分析工具
      // 在以 --report 方式 build 时，启用打包分析
      if (process.env.npm_config_report) {
        config.plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin).end()
      }
    })
  }
}

module.exports = config