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檔案,可以減少編譯后代碼的體積
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550815.html

標籤：其他

上一篇：Vue3 代碼塊高亮顯示并可使用富文本編輯器編輯（highlight.js + wangEditor）

下一篇：返回列表