vue全家桶進階之路50：Vue3 環境變數+跨域設置實例

使用.env加尾碼的方式來建立某個模式下的環境變數，

例如：項目根目錄新建兩個環境變數文件（development開發環境和production生產環境）：

.env.development

.env.production

 在新建的兩個環境變數文件中設置相同的環境變數名：

VUE_APP_BASE_API

環境變數名稱必須以"VUE_API_"+名稱的格式，否則不生效，這個格式是死的。至於後面部分就是自定義部分。

重點來了，我們為什麼要建立這兩個環境變數的文件，那是因為能解決我們在開發的時候來回改動伺服器的困擾，有了這兩個環境變數文件，當運行（npm run serve）的時候自動調取開發環境的變數，當打包（npm run build）的時候就會調取生產環境的變數，這樣一來總是改動了，即使以後更換了伺服器，只要在這兩個地方修改即可。

.env.development文件命令：

#介面服務地址
VUE_APP_SERVICE_URL='http://localhost:8001/'
#開發環境路徑首碼
VUE_APP_BASE_API='/dev-apis'

.env.production文件命令：

#生成環境路徑首碼
VUE_APP_BASE_API='/prod-apis'

vue.config.js文件命令調用環境變數：

環境變數的獲取使用"process.env."+環境變數名稱的方式，例如：

process.env.VUE_APP_BASE_API

一下是完整設置

module.exports={
    devServer:{
        port:8888,//前端埠
        open:true,//運行後瀏覽器自動彈出
        https:false,//不採用https加密方式
        host:"localhost",//前端主機，也可以是127.0.0.1，如果能被外界訪問可以設置為0.0.0.0
        proxy:{
            [process.env.VUE_APP_BASE_API]:{//環境變數
                target:process.env.VUE_APP_SERVICE_URL,//後端伺服器，即：API伺服器
                changeOrigin:true,//是否允許跨域
                pathRewrite:{//請求路徑重寫
                    ['^'+process.env.VUE_APP_BASE_API]:''//匹配開頭為環境變數值的字元串，後面設置空字元串。
                }
            }
        }
    },
    lintOnSave:false, //關閉格式檢查
    productionSourceMap:false //在生產環境中不生成source map文件,可以減少編譯後代碼的體積
}