vue.js 多種打包場景的配置

一. 認識 vue.js 中的webpack 配置文件

vue.js 開發環境與正式打包是兩個 webpack 配置文件處理的。

這兩個配置文件，作為開發者大佬肯定不陌生， 但是對於剛剛入門vue.js 的朋友們，肯定有些疑惑， dev配置文件，則是開發時的配置文件， prod 是打包時的文件。 還有一個 webpack.base.conf.js 文件則是公用的配置， 這裡不過多解釋 ， vue.js 很多的配置已經給我們做好了，所以我們不用太去管裡面的內容是什麼。 （小提示：如果開發環境要配置成https 協議，也可以在dev.conf.js 中配置喲。）

二. vue.js config 文件夾說明

其實 vue.js 已經有個專門配置 開發環境與正式環境的配置文件夾。

dev.env.js 與 prod.env.js 很少去動，甚至不會去動。 但是這次的配置，離不開這兩個配置文件。

index.js 則不用過多說明， 你們都認識他（如果新手朋友有困擾可以留言問我，能一下百度出來的就別找我了， 人人都討厭伸手黨）。

三. 配置開發環境與正式打包地址

1. dev.env.js / prod.env.js 中添加一個配置存放 API 地址的字段。 字段名一點要保證一致。 我這裡用 API_ROOT

注： 這裡有個大坑。 單引號中的雙引號一定要保留， 不保留會出現你意想不到的事，你們自己去試吧。

2. 在項目中引用我們配置的API接口地址。

每個項目我都喜歡建一個config文件夾，配置信息，這樣後期更改不會到處找， 如果你們沒有這樣的習慣的話，也可以直接 axios 中引用配置的地址。

3. process.env 是哪裡來的？

這個 process.env 是webpack 暴露出來的全局對象。webpack的兩個配置文件中可找到

webpack.prod.conf.js 配置示例：

let env = require('../config/prod.env')
...
plugins: [
 new webpack.DefinePlugin({ 'process.env': env }),複製代碼

webpack.DefinePlugin 配置詳情 機票

可以發現我們配置的js 文件被webpack給全局暴露出來了。

webpack.dev.conf.js 也是一樣的， 這就是為什麼需要用相同的字段名稱。

好了。開發環境與正式打包就說完了。

四. 測試環境打包與正式環境打包配置

開導：這裡的改變是建立在上一章的基礎上的，多添加了一個測試環境的打包配置。 主要場景就是， 同時測試環境的打包與正式環境的打包。

1. config的配置均不變。 這次改動主要更改webpack 中的配置。

2. 因為都是打包配置，所以這次只會更改 webpack.dev.conf.js 文件

3. yarn build 默認打包正式環境。 yarn build dev 打包測試環境

這裡補充一個小知識。 獲取 輸入命令後的參數。 process.argv

4. 知道如何獲取命令的參數了。 我們便要區分當前的 BASE_API 是正式還是測試的。

const devEnv = require('../config/dev.env')
// 因為要更改 所以我們要把 const 更換為 let
let env = require('../config/prod.env')
// 獲取命令參數時前兩個無用的參數需要去掉，然後取第一個參數，也可以不截取，取下標3的數據 

const spliceParam = process.argv.splice(2)[0]
// 如果有參數，並且還是dev，則替換接口地址
if (spliceParam === 'dev') {
 env.BASE_API = devEnv.BASE_API
}複製代碼

五. 多種打包環境，秘密級武器了，很少遇見。

開導：這裡的改變也是建立在上一章的基礎上的，多添加了不同環境的打包配置。 主要場景就是，需要打包多個不同接口地址環境的打包。

1. 因為多個環境比較特殊，所以更改的地方比較多。

3. 我們需要多添加一個標識來獲取 不同場景的接口地址。 【API_KEY】

prod.env.js 示例：

module.exports = {
 NODE_ENV: '"production"', 
 API_KEY: '"production"', // 指定 API key, 獲取不同的 地址。 
 // 打包 URL 地址配置 
 dev: '"http://test.cc/api"', // 請勿刪除該條數據。 
 production: '"http://18.*****.122:8089"', // 請勿刪除該條數據 
 fishpond: '"http://18.****:8111"', 
 megatron: '"http://18.*****.122:8222"'}複製代碼

dev.env.js 示例：

const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {  

 NODE_ENV: '"development"', 
 API_KEY: '"dev"', // dev 配置。 默認都是 dev
})複製代碼

細心的小夥伴，能發現dev 其實引用了 prod的配置文件的。我們是通過API_KEY來獲取接口地址的。為了不影響上線數據，所以 我們要把dev的API_KEY 則設置 dev。 這樣它就會覆蓋掉 prod的配置。

4. 獲取接口地址結構改變了，那我們又如何引用呢？

const processEnv = process.envexport 
const BASE_URL = processEnv[processEnv.API_KEY] // 基本請求地址， 更改方式在 prod.env.js 中複製代碼

很簡單，通過表達式就能直接獲取當前環境的接口地址了

5. 每次更改prod的API_KEY 很麻煩？我們再優化一下， 使用命令直接打包。

// 不同的選項，引用不同的包。
let env = require('../config/prod.env')
const spliceParam = process.argv.splice(2)[0] // 拼接參數
// 如果存在拼接參數，則判斷當前接口是否存在
if (spliceParam) {
 if (env[spliceParam]) {
 env.API_KEY = env[spliceParam]
 } else {
 throw new Error(`當前打包參數:${spliceParam},URL未指定, 請先在/config/prod.env.js 中配置`)
 }
} else { 

 if (!env[env.API_KEY]) {
 throw new Error(`當前打包參數:${env.API_KEY}, URL未指定, 請先在/config/prod.env.js 中配置`)
 }
}複製代碼

這樣就能愉快的使用命令打包了。 yarn build dev、yarn build fishpond...

當然加入判斷地址是否存在，是為了防止輸入錯誤，導致項目發佈無法正常請求的情況。

六. 關於打包的配置，就這麼多了。 如果你有很好的方式，歡迎分享與留言。 如果代碼中有不正確的使用，也同時歡迎指出，共同進步。

七. 轉發請註明出處，謝謝。