vue-cli3 配置多環境打包

近期由于公司項目需要在本地服務器和阿里云服務器兩個地方搭建項目，因為本地服務器是內網無法訪問在阿里云的微服務接口所以需要用到多環境配置，所以就研究了一下vue-cli3的多環境配置。

環境變量丨模式

首先我們先看看 vue-cli環境變量和模式，通過官網我們可以發現 vue-cli 提供了三個模式(test、development、production)而每種NODE_ENV下面可以配置多個環境變量。

我們可以通過.env文件增加后綴來設置某個模式下特有的環境變量

我們可以通過傳遞 --mode選項參數為命令覆寫默認的模式，使用自己的環境變量

了解基本情況之后我們就舉例子實現多環境。

環境加載屬性

為一個特定模式準備的環境文件 (例如 .env.production) 將會比一般的環境文件 (例如 .env) 擁有更高的優先級。

此外，Vue CLI 啟動時已經存在的環境變量擁有最高優先級，并不會被 .env 文件覆寫。

模式

模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：

development?模式用于?vue-cli-service serve

production?模式用于?vue-cli-service build?和?vue-cli-service test:e2e

test?模式用于?vue-cli-service test:unit

注意模式不同于 NODE_ENV，一個模式可以包含多個環境變量。也就是說，每個模式都會將 NODE_ENV 的值設置為模式的名稱——比如development 模式下 NODE_ENV 的值會被設置為?"development"。

你可以通過為 .env 文件增加后綴來設置某個模式下特有的環境變量。比如，如果你在項目根目錄創建一個名為 .env.development 的文件，那么在這個文件里聲明過的變量就只會在 development 模式下被載入。

1.首先在項目目錄下創建不同的.env文件

目前我們討論 開發環境 dev,測試環境test,發布環境 prod，所以我們創建如下三個文件(.env.prod、.env.test、.env.development)

2、配置三個文件

①開發環境: 如下圖

這里開發環境 的 NODE_ENV 需要配置為 development

VUE_APP_API_URL 設置對應的請求地址

②測試環境 如下圖

這里開發環境 的 NODE_ENV 需要配置為 production

VUE_APP_API_URL 設置對應的請求地址

③ 發布環境 如下圖

這里發布環境的 NODE_ENV需要配置為production

VUE_APP_API_URL 設置對應的請求地址

?④ 如果需要其他環境 按照以上描述 創建 .env.[model]文件

如果是 項目打包 那么 NODE_ENV 設置為 production ,本地運行(不需要打包) NODE_ENV 設置為 development

VUE_APP_API_URL 設置對應的請求地址

特別提示 上述的 VUE_APP_API_URL 不一定非要使用這個變量 只要是 VUE_APP_ 開頭的都可以因為?只有以 VUE_APP_?開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。都可以使用? process.env.VUE_APP_** 獲取相應的值

3、完成以上所需環境配置之后改寫 package.json

首先我們先看看 vue-cli環境變量和模式，通過官網我們可以發現 vue-cli 提供了三個模式(test、development、production)而每種NODE_ENV下面可以配置多個環境變量。

我們可以通過.env文件增加后綴來設置某個模式下特有的環境變量

我們可以通過傳遞 --mode選項參數為命令覆寫默認的模式，使用自己的環境變量

了解基本情況之后我們就舉例子實現多環境。

?這里 需要注意的 是 --model 后面的參數 需要是 .env.[model] 文件 對應的 [model]?

例如 .env.test 文件 那么? 這里就是 --mode test.env.prod 文件 那么 這里就是 --mode prod.

特別提示 本地開發環境 如果 本地開發環境? 配置 的 .env.[model] 文件名中的 model 為 development 那么 直接使用上述的??vue-cli-service?serve?--port?8090?--open命令，但是 如果 .env.[model]的文件名中的model 不是 development 那么 就需要在 命令后面添加 --model 這個model的值 對應的就是 .env.[model]文件的 后綴[model]的值

完成以上配置 就可以按需要執行打包命令，完成vue-cli3的 多環境打包配置。

總結

以上是生活随笔為你收集整理的vue 固定名称 打包时_vuecli3 配置多环境打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。