vue 不同環境參數配置

開發過程中，經常會有不同的生產環境配置的參數都是不一樣的，使用webpack配置不同的參數環境

• 在config 目錄下新建 文件

/*
 * @param 
 * DEV_PORT  默認dev開發端口
 * WEB_PATH_ASSETS  打包路徑
 * BASE_URL  接口前綴
 */
function getCodeEnv() {
    const args = process.argv
    var res
    for (var i = 0; i < args.length; i++) {
      if (args[i].indexOf('--env.CODE_ENV=') !== -1) {
        res = args[i].split('=')[1] || ''
        break
      }
    }
    return res || 'production'
  }
  
  const CODE_ENV = `"${getCodeEnv()}"`
  
  const { DEV_PORT, WEB_PATH_ASSETS, BASE_URL } = (() => {
    const def = {
      DEV_PORT: '80',
      WEB_PATH_ASSETS: '"/dist/"',
      BASE_URL: '""'
    }
    
    switch (CODE_ENV) {
      case '"development"':
        def.DEV_PORT = '3000'
        def.WEB_PATH_ASSETS = '"/store-pass-portals/dist/"'
        def.BASE_URL = '"/store-pass-portals"'
        break
      case '"test"':
        def.DEV_PORT = '3000'
        def.WEB_PATH_ASSETS = '"/store-pass-portals/dist/"'
        def.BASE_URL = '"/store-pass-portals"'
        break
      case '"preproduction"':
        def.DEV_PORT = '3000'
        def.WEB_PATH_ASSETS = '"/dist/"'
        def.BASE_URL = '""'
        break
      case '"production"':
      default:
    }
    return def
  })()
  
  module.exports = {
    CODE_ENV,
    DEV_PORT,
    WEB_PATH_ASSETS,
    BASE_URL
  }
  

• 修改dev.env.js 文件 添加 code.env.js

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
const codeEnv = require('./code.env')  //

module.exports = merge(
  prodEnv,
  {
    NODE_ENV: '"development"'
  },
  codeEnv
)

• 修改 config/index.js 文件 根據打包需要傳遞對應的參數

  //這裏只是代碼片段  相應需要修改的
  

var path = require('path')
const codeEnv = require('./code.env')
module.exports = {
build: {
assetsPublicPath: JSON.parse(codeEnv.WEB_PATH_ASSETS), //對應的打包路徑
....
},
dev:{
port: JSON.parse(codeEnv.DEV_PORT), //這裏的端口don
}

- 修改prod.env.js
```js
const merge = require('webpack-merge')
const codeEnv = require('./code.env')

module.exports = merge(
  {
    NODE_ENV: '"production"'
  },
  codeEnv
)

• index.html 如果需要手動引入靜態資源路徑

<link rel="icon" href="<%= process.env.WEB_PATH_ASSETS %>static/favorite.ico">

• package.json scripts修改

"dev": "node build/dev-server.js --env.CODE_ENV=development",
    "dev_test": "node build/dev-server.js --env.CODE_ENV=test",
    "dev_preprod": "node build/dev-server.js --env.CODE_ENV=preproduction",
    "dev_prod": "node build/dev-server.js --env.CODE_ENV=production",
    "build": "node build/build.js --env.CODE_ENV=production",
    "build_test": "node build/build.js  --env.CODE_ENV=test",
    "build_preprod": "node build/build.js  --env.CODE_ENV=preproduction",