前言

在實(shí)際項(xiàng)目的開(kāi)發(fā)中，我們一般會(huì)經(jīng)歷項(xiàng)目的開(kāi)發(fā)階段、測(cè)試階段和最終上線階段，每一個(gè)階段對(duì)于項(xiàng)目代碼的要求可能都不盡相同，那么我們?nèi)绾文軌蛴稳杏杏嗟脑诓煌A段下使我們的項(xiàng)目呈現(xiàn)不同的效果，使用不同的功能呢？這里就需要引入環(huán)境的概念。官方文檔中模式和環(huán)境變量說(shuō)明

一般一個(gè)項(xiàng)目都會(huì)有以下 3 種環(huán)境：

開(kāi)發(fā)環(huán)境（開(kāi)發(fā)階段，本地開(kāi)發(fā)版本，一般會(huì)使用一些調(diào)試工具或額外的輔助功能）； 測(cè)試環(huán)境（測(cè)試階段，上線前版本，除了一些 bug 的修復(fù)，基本不會(huì)和上線版本有很大差別）； 生產(chǎn)環(huán)境（上線階段，正式對(duì)外發(fā)布的版本，一般會(huì)進(jìn)行優(yōu)化，關(guān)掉錯(cuò)誤報(bào)告）；

作為一名開(kāi)發(fā)人員，我們可能需要針對(duì)每一種環(huán)境編寫(xiě)一些不同的代碼并且保證這些代碼運(yùn)行在正確的環(huán)境中，那么我們應(yīng)該如何在代碼中判斷項(xiàng)目所處的環(huán)境同時(shí)執(zhí)行不同的代碼呢？這就需要我們進(jìn)行正確的環(huán)境配置和管理。

1. 配置文件

正確的配置環(huán)境首先需要我們認(rèn)識(shí)不同環(huán)境配置之間的關(guān)系，如圖所示：

我們從上圖中可以了解到每一個(gè)環(huán)境其實(shí)有其不同的配置，同時(shí)它們也存在著交集部分，交集便是它們都共有的配置項(xiàng)，那么在 Vue 中我們應(yīng)該如何處理呢？

我們可以在根目錄下創(chuàng)建以下形式的文件進(jìn)行不同環(huán)境下變量的配置：

.env# 在所有的環(huán)境中被載入.env.local # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略.env.[mode] # 只在指定的模式中被載入, 如：.env.development,.env.production .env.[mode].local # 只在指定的模式中被載入，但會(huì)被 git 忽略

如：創(chuàng)建一個(gè)名為 .env.development 的文件，該文件表明其只在 development 環(huán)境下被加載。

在這個(gè)文件中，我們可以配置如下鍵值對(duì)的變量：

# 開(kāi)發(fā)環(huán)境配置NODE_ENV=developmentVUE_APP_API_BASE_URL=https://www.baidu.com/

這時(shí)怎么在 vue.config.js 中訪問(wèn)這些變量呢？使用 process.env.[name] 進(jìn)行訪問(wèn)就可以了。

// vue.config.jsconsole.log(process.env.NODE_ENV); // development（在終端輸出）

當(dāng)運(yùn)行 npm run serve 命令后會(huì)發(fā)現(xiàn)輸出的是 development，因?yàn)?vue-cli-service serve 命令 默認(rèn)設(shè)置的環(huán)境就是 development。

如果我們需要修改，可將 package.json 中的 serve 腳本的命令為：

// package.json'scripts': { 'serve': 'vue-cli-service serve --mode stage',},

?mode stage 其實(shí)就是修改了 webpack 4 中的 mode 配置項(xiàng)為 stage，同時(shí)其會(huì)讀取對(duì)應(yīng) .env.[model] 文件下的配置。如果沒(méi)找到對(duì)應(yīng)配置文件，其會(huì)使用默認(rèn)環(huán)境 development，同樣 vue-cli-service build 會(huì)使用默認(rèn)環(huán)境 production。

如果再創(chuàng)建一個(gè) .env 的文件，再次配置重復(fù)的變量，但是值不同。

# 環(huán)境配置NODE_ENV=ENVVUE_APP_API_BASE_URL=http://www.soso.com/

因?yàn)?.env 文件會(huì)被所有環(huán)境加載，即公共配置，那么最終運(yùn)行 vue-cli-service serve 打印出來(lái)的是哪個(gè)呢？

答案是 development。

但是如果是 .env.development.local 文件中配置成上方這樣，答案便是 ENV。

所以 .env.[mode].local 會(huì)覆蓋 .env.[mode] 下的相同配置。

同理 .env.local 會(huì)覆蓋 .env 下的相同配置。

由此可以得出結(jié)論，相同配置項(xiàng)的權(quán)重：.env.[mode].local > .env.[mode] > .env.local > .env注意： 除了相同配置項(xiàng)權(quán)重大的覆蓋小的，不同配置項(xiàng)它們會(huì)進(jìn)行合并操作，類似于 Javascript 中的 Object.assign 的用法。

2. 環(huán)境注入

通過(guò)上述配置文件的創(chuàng)建，我們成功地使用命令行的形式對(duì)項(xiàng)目環(huán)境進(jìn)行了設(shè)置并可以自由切換，但是注意：在 Vue 的前端代碼中打印出的 process.env 與 vue.config.js 中輸出的可能是不一樣的，這需要普及一個(gè)知識(shí)點(diǎn)：webpack 通過(guò) DefinePlugin 內(nèi)置插件將 process.env 注入到客戶端代碼中。

// webpack 配置{ ... plugins: [new webpack.DefinePlugin({ ’process.env’: {NODE_ENV: JSON.stringify(process.env.NODE_ENV) }}), ], ...}

由于 vue-cli 3.x 封裝的 webpack 配置中已經(jīng)幫我們完成了這個(gè)功能，所以可以直接在客戶端代碼中打印出 process.env 的值，該對(duì)象可以包含多個(gè)鍵值對(duì)，也就是說(shuō)可以注入多個(gè)值，但是 經(jīng)過(guò) vue-cli 封裝后僅支持注入環(huán)境配置文件中以 VUE_APP_ 開(kāi)頭的變量，而 NODE_ENV 和 BASE_URL 這兩個(gè)特殊變量除外。

比如：在權(quán)重最高的 .env.development.local 文件中寫(xiě)入：

# 開(kāi)發(fā)環(huán)境配置NODE_ENV=developmentLocalVUE_APP_API_BASE_URL=https://www.baidu.com/NAME=javaScript

然后我們嘗試在 vue.config.js 中打印 process.env，終端輸出：

{ ... npm_config_ignore_scripts: ’’, npm_config_version_git_sign: ’’, npm_config_ignore_optional: ’’, npm_config_init_version: ’1.0.0’, npm_package_dependencies_vue_router: ’^3.0.1’, npm_config_version_tag_prefix: ’v’, npm_node_execpath: ’/usr/local/bin/node’, NODE_ENV: ’developmentLocal’, VUE_APP_API_BASE_URL: ’https://www.baidu.com/’, NAME: ’javaScript’, BABEL_ENV: ’development’, ...}

可以看到輸出內(nèi)容除了環(huán)境配置中的變量外還包含了很多 npm 的信息，但在入口文件 main.js 中打印會(huì)發(fā)現(xiàn)輸出：

{ BASE_URL: '/', NODE_ENV: 'developmentLocal', VUE_APP_API_BASE_URL: 'https://www.baidu.com/',}

可見(jiàn)注入時(shí)過(guò)濾調(diào)了非 VUE_APP_ 開(kāi)頭的變量，其中多出的 BASE_URL 為你在 vue.config.js 設(shè)置的值，默認(rèn)為 /，其在環(huán)境配置文件中設(shè)置無(wú)效。

3. 額外配置

以上我們通過(guò)新建配置文件的方式為項(xiàng)目不同環(huán)境配置不同的變量值，能夠?qū)崿F(xiàn)項(xiàng)目基本的環(huán)境管理，但是 .env 這樣的配置文件中的參數(shù)目前只支持靜態(tài)值，無(wú)法使用動(dòng)態(tài)參數(shù)，在某些情況下無(wú)法實(shí)現(xiàn)特定需求。

這時(shí)候可以在根目錄下新建 config 文件夾用于存放一些額外的配置文件。

/* 配置文件 index.js */ // 公共變量const com = { IP: JSON.stringify(’xxx’)};module.exports = { // 開(kāi)發(fā)環(huán)境變量 dev: { env: { TYPE: JSON.stringify(’dev’), ...com } }, // 生產(chǎn)環(huán)境變量 build: { env: { TYPE: JSON.stringify(’prod’), ...com } }}

以上代碼把環(huán)境變量分為了公共變量、開(kāi)發(fā)環(huán)境變量和生產(chǎn)環(huán)境變量，當(dāng)然這些變量可能是動(dòng)態(tài)的，比如用戶的 ip 等?，F(xiàn)在我們要在 vue.config.js 里注入這些變量，可以使用 chainWebpack 修改 DefinePlugin 中的值：

/* vue.config.js */const configs = require(’./config’); // 用于做相應(yīng)的 merge 處理const merge = require(’webpack-merge’); // 根據(jù)環(huán)境判斷使用哪份配置const cfg = process.env.NODE_ENV === ’production’ ? configs.build.env : configs.dev.env;module.exports = { chainWebpack: config => { config.plugin(’define’).tap(args => { let name = ’process.env’; // 使用 merge 保證原始值不變 args[0][name] = merge(args[0][name], cfg); return args }) },}

最后可以在客戶端成功打印出包含動(dòng)態(tài)配置的對(duì)象：

{ BASE_URL: '/', IP: 'xxx', NODE_ENV: 'developmentLocal', TYPE: 'dev', VUE_APP_API_BASE_URL: 'https://www.baidu.com/',}4. 實(shí)際場(chǎng)景

使用 process.env.xxx 來(lái)訪問(wèn)屬性

<script>export default { data() { return { BASEURL:process.env, } }, mounted(){ console.log(this.BASEURL.VUE_APP_API_BASE_URL) // https://www.baidu.com/ }}</script>

// 創(chuàng)建 axios 實(shí)例const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url timeout: 5000})結(jié)語(yǔ)

環(huán)境的配置和管理對(duì)于項(xiàng)目的構(gòu)建起到了至關(guān)重要的作用，通過(guò)給項(xiàng)目配置不同的環(huán)境不僅可以增加開(kāi)發(fā)的靈活性、提高程序的拓展性，同時(shí)也有助于幫助我們?nèi)チ私獠⒎治鲰?xiàng)目在不同環(huán)境下的運(yùn)行機(jī)制，建立全局觀念。

到此這篇關(guān)于Vue CLI中模式與環(huán)境變量的文章就介紹到這了,更多相關(guān)Vue CLI模式與環(huán)境變量?jī)?nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！