在Vue-cli3中 區分環境打包

在vue-cli3的項目中，

npm run serve時會把process.env.NODE_ENV設置爲‘development’；

npm run build 時會把process.env.NODE_ENV設置爲‘production’；

此時只要根據process.env.NODE_ENV設置不同請求url就可以很簡單的區分出本地和線上環境。

頭疼的是打包時線上環境可能分多種，比如測試環境和生產環境等等。

在vue-cli2中打包時可以修改 “build” 和 “config”中的文件來區分不同的線上環境

而vue-cli3號稱0配置，無法直接修改打包文件，那麼怎麼區分不同的線上環境呢？ 也就是說npm run build時怎麼手動更改process.env.NODE_ENV？

注意：

其實通過改變process.env.NODE_ENV值區分打包環境是有問題的，因爲webpack打包時針對process.env.NODE_ENV===‘production’和其他情況打出來的包結構和大小都不一樣；所以我們打出來的包的NODE_ENV都應該是production。

以下就是具體的實現分包步驟：

1. 在package.json中添加打包命令：

 	"build:prod": "vue-cli-service build", 
    "build:stage": "vue-cli-service build --mode staging",

npm run build:prod打包出來的是生成環境的包，npm run build:stage打包的是測試環境的包。

2. 在項目根目錄添加文件“.env.development”、“.env.production”、“.env.staging” （注意：這裏.env.xx的命名要和package.json中–mode xx的名字一樣！！不然webpack是無法識別的）

.env.development和.env.production其實是vue-cli3中自帶的，所以不需要設置NODE_NEV，而staging是我們新增的，所以需要設置

.env.development代碼

#以下的值webpack會根據不同的環境取得不同的值，使用方法：process.env.

#設定一個標題，代表這個環境是development
VUE_APP_TITLE = 'development'

# 打包文件的名字
VUE_APP_FILE_Name = 'dist'

#文件地址
VUE_APP_BUILD_PATH = '/'

# 區分v2的測試和生產外鏈 使用方法：process.env.VUE_APP_EXTERNAL_LINK
VUE_APP_EXTERNAL_LINK = 'https://www.baidu.com'

.env.production代碼：

#以下的值webpack會根據不同的環境取得不同的值，使用方法：process.env.

#設定一個標題，代表這個環境是production
VUE_APP_TITLE = 'production'

# 打包後文件夾的名字
VUE_APP_FILE_Name = 'dist'

#打包後的文件地址
VUE_APP_BUILD_PATH = '/uduhs-web-page/'

# 區分v2的測試和生產外鏈 使用方法：process.env.VUE_APP_EXTERNAL_LINK
VUE_APP_EXTERNAL_LINK = 'https://www.taobao.com'

.env.staging代碼：

NODE_ENV = production

#以下的值webpack會根據不同的環境取得不同的值，使用方法：process.env.

#設定一個標題，代表這個環境是staging
VUE_APP_TITLE = 'staging'

# 打包後文件夾的名字
VUE_APP_FILE_Name = 'staging'

#打包後的文件地址
VUE_APP_BUILD_PATH = '/uduhs-web-page/'

# 區分v2的測試和生產外鏈 使用方法：process.env.VUE_APP_EXTERNAL_LINK
VUE_APP_EXTERNAL_LINK = 'https://www.baidu.com'

然後我們在vue.config.js中測試一下是否有效，比如，我們設置打包後的地址和打包後的文件夾名字

module.exports = {
  publicPath: process.env.VUE_APP_BUILD_PATH, // 打包後的文件地址
  outputDir: process.env.VUE_APP_FILE_Name, // 打包的文件夾名字
  }

設置好後，我們來測試一下，我先運行npm run build:prod
打包後的文件名字爲：

然後我們運行npm run build:stage的時候，打包的文件夾名字爲：

然後，我們在測試一下，在development和stageing命名下的VUE_APP_EXTERNAL_LINK的值是：

console.log(process.env.VUE_APP_EXTERNAL_LINK)

而我運行命令：npm run build:prod，把包放在服務器上是，打印出的值是：

可以看到，webpack會根據你不同的命令，給出你設置不同的值，這樣子我們就可以分包處理了。