接口環境不少？靜態資源要放cdn？不用修改代碼，用webpack就能夠（vue）

multi-hostname-vue-cli

github傳送門

針對解決的問題

1. 接口環境不少，有測試服，有qa，有正式等等，每次都要修改代碼？no!
2. 靜態資源可能要存到cdn中，這也要修改代碼嗎？no!

Start up

clone && npm install

修改配置文件 /config/host-config.js,只須要修改 ENV_LIST

/*
* 環境列表，第一個環境爲默認環境
* envName: 指明如今使用的環境
* dirName: 打包的路徑，只在build的時候有用
* apiHostname: 這個環境下面的api 請求的域名
* assetHostname: 靜態資源存放的域名,未指定（undefined）則爲相對路徑
* */
const ENV_LIST = [
  {
    envName: 'test',
    dirName: 'test',
    apiHostname: 'http://test_apiHostname',
    assetHostname: 'http://localhost:3004'
  },
  {
    envName: 'pro',
    dirName: 'pro',
    apiHostname: 'http://product_apiHostname',
    assetHostname:'http://product_assetHostname'
  },
  {
    envName: 'qa',
    dirName: 'qa',
    apiHostname: 'http://product_apiHostname',
    assetHostname:'http://product_assetHostname'
  }
]

在文件中使用hostname

const HOST_NAME = process.env.HOST_NAME
export {HOST_NAME}

dev 開發調試

npm run dev [envName]

• envName 爲上面配置的envName，對應的process.env.HOST_NAME的值就是 對應的ENV_LIST中的hostname
• 不指定envName默認選擇ENV_LIST的第一個值
• envName 不在ENV_LIST 中的時候默認選擇 ENV_LIST的第一個值

# 例子：
# 在qa的環境中調試，process.env.HOST_NAME === 'http://qa_hostname'
npm run dev qa

build 打包

npm run build [envName] //打指定環境的包

npm run build-all // 所有從新打包

• 打包的envName與 dev相似
• 執行打包命令會在dist文件夾中生成對應的路徑
• html和css中使用過的靜態資源的引用路徑會指定到設定的域名中

dist
    |-test
    |-qa
    |-pro

對比vue-cli生成的環境修改的地方

新增 /config/host-conf.js

host-conf.js

修改 /config/index.js

• 修改build的路徑
• 修改build的靜態資源的路徑

修改 `/build/webpack.base.conf.js

• 添加 用戶客戶端的環境變量

// 經過webpack傳入客戶端中
  plugins: [
    new webpack.DefinePlugin({
      'process.env.HOST_NAME': '\"' + process.env.HOST_NAME + '\"'
    })
  ]

入口build/build.js和build/dev-server.js設置環境變量

// 設置域名的環境變量
process.env.HOST_ENV = process.argv[2]

新增 build/build-all.js

host-conf.js

修改package.json的script, 增長Build-all

"build-all": "node build/build-all.js"