vue根據不同命令打出不同環境的包

一、vue3.x

1.配置全局環境變量：
　　在項目根目錄創建配置文件：.env、.env.development、.env.production、.env.test

　　說明：
　　.env 無論開發環境還是生成環境都會加載這個文件
　　.env.development 開發環境自動加載這個文件
　　.env.production 生成環境自動加載這個文件
此外，env 文件需要聲明運行的環境，且定義變量需要以 VUE_APP_ 作為前綴。

.env.development文件：

//.env.development
NODE_ENV = development
VUE_APP_BASE_URL = http://dev.myhost.com

.env.production文件：

//.env.production
NODE_ENV = production
VUE_APP_BASE_URL = http://myhost.com

.env.test文件：

//.env.test
NODE_ENV = test
VUE_APP_BASE_URL = http://test.myhost.com

2.配置package.json來啟動不同的命令

"scripts": {
    "dev": "vue-cli-service serve",//默認加載.env.development
    "test": "vue-cli-service serve --mode test",//加載.env.test
    "pro": "vue-cli-service serve --mode production",//加載.env.production
　　 "build": "vue-cli-service build",//默認加載.env.production
    "build:dev": "vue-cli-service build --mode dev",//加載.env.development
    "build:test": "vue-cli-service build --mode test",//加載.env.test
},

二、vue2.x

1.項目安裝cross-env。cross-env是node的一個設置和使用環境變量的腳本：npm install cross-env -D

2.在根目錄的package.json文件中，把scripts對象的build字段的值改為以下代碼。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env env_config=prod node build/build.js",
    "build:test": "cross-env env_config=test node build/build.js",
    "build:pre": "cross-env env_config=pre node build/build.js"
},

代碼說明：我們使用了cross-env腳本，新增了一個全局變量：env_config。后面根據這個全局變量的值，調用不同開發環境的變量值。調用方式：process.env.env_config。

3，修改控制台提示語句：在根目錄的build/build.js文件內找到const spinner = ora('building for production...')這行代碼，將其改為const spinner = ora('正在打'+process.env.env_config+'環境包...')，方便打包的時候知道正在打哪個環境的包。

4.在根目錄的/config/prod.env.js文件內，為不同環境創建不同變量值。

'use strict'
module.exports = {
  prod: {
    NODE_ENV: '"production"',
    API_URL: '"生產環境接口url訪問地址"'
  },
  test: {
    NODE_ENV: '"test"',
    API_URL: '"測試環境接口url訪問地址"'
  },
  pre: {
    NODE_ENV: '"pre"',
    API_URL: '"預發布環境接口url訪問地址"'
  },
}

5.修改.env的訪問地址，以調用對應環境的變量，在根目錄的/build/webpack.prod.conf.js文件內找到

//找到以下代碼
new webpack.DefinePlugin({
  'process.env': env
})
//修改為如下，不再直接訪問.env，而是訪問.env下對應環境變量名的變量值
new webpack.DefinePlugin({
  'process.env': env[process.env.env_config]
})

vue2.x根據不同命令打出不同環境的包就完成了，接下來打包即可。

三、其它方式

其實也可以直接通過判斷當前域名，改變全局變量的值，能實現一個dist包適應多個開發環境。代碼示例：

//在全局js文件中，創建全局變量，之后直接引用即可
// 域名常量
const _const = {
  apiUrl: '生產環境服務器接口地址'
}
// 通過域名判斷當前環境
if(location.host === '測試環境域名' || location.host.indexOf('localhost')>-1) {
  _const.apiUrl = '測試環境服務器接口地址';// 測試環境服務器接口地址
}
if(location.host === '預發布環境域名') {
  _const.apiUrl = '預發布環境服務器接口地址';// 預發布環境服務器接口地址
}

export default {
  _const: _const
}

這個寫法不太符合代碼規范，以后接手你代碼的人會一頭霧水，他在.env文件中會找不到開發環境的變量。所以需要在.env文件中寫上注釋：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  // API_ROOT: '',//域名url等作為常量，存放於根目錄該文件下：src/util/common.js。第1行
}