vue設(shè)置環(huán)境變量

在開發(fā)的時(shí)候一般會(huì)有是三個(gè)環(huán)境：開發(fā)環(huán)境 測(cè)試環(huán)境 線上環(huán)境

vue 中有個(gè)概念就是模式，默認(rèn)先vue cli 有三個(gè)模式

• development模式用于 vue-cli-service serve
• production模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test模式用于 vue-cli-service test:unit

但是往往開發(fā)的時(shí)候可能不止有三種：

• 本地環(huán)境（local）
• 開發(fā)環(huán)境（development）
• 測(cè)試環(huán)境（devtest）
• 預(yù)發(fā)布環(huán)境（beta）
• 生產(chǎn)環(huán)境（production）

參考鏈接：配置環(huán)境變量

創(chuàng)建不同環(huán)境變量文件

如官方文檔所說，通過為.env文件增加后綴來設(shè)置某個(gè)模式下特有的環(huán)境變量。我這里有5個(gè)環(huán)境，所以配置了5個(gè).env文件。如下圖：

給.env文件添加內(nèi)容

基本格式如下：

NODE_ENV=環(huán)境名稱VUE_APP_URL=對(duì)應(yīng)的環(huán)境地址

如我本地環(huán)境的配置就如下圖所示：

我本地是用的easy-mock模擬的數(shù)據(jù)，所以配置的地址是mock接口地址。

在package.json中添加不同環(huán)境對(duì)應(yīng)的執(zhí)行語句

如官方文檔所說，可以通過傳遞 --mode 來配置不同的模式。我自己的項(xiàng)目配置如下圖：

使用

文件已創(chuàng)建好，配置語句也已寫好。怎么用它呢？

首頁你需要哪個(gè)環(huán)境，就執(zhí)行哪個(gè)環(huán)境的命令語句。

比如我現(xiàn)在需要local環(huán)境，就執(zhí)行 npm run local-serve 。

如下圖所示：

然后通過 process.env.NODE_ENV 獲取環(huán)境名；通過 process.env.VUE_APP_URL 獲取環(huán)境對(duì)應(yīng)的url。

比如我們?cè)赼xios請(qǐng)求中，就可以把它的baseURL設(shè)置為 process.env.VUE_APP_URL 

如下圖所示：

如果你不確定你自己現(xiàn)在是在哪個(gè)環(huán)境變量下，可以 console.log(“當(dāng)前環(huán)境變量：”+process.env.NODE_ENV) 和 console.log(“當(dāng)前環(huán)境路徑：”+process.env.VUE_APP_URL) 看下。

總而言之就是，你需要哪個(gè)環(huán)境變量，就 【npm run 對(duì)應(yīng)的環(huán)境變量】 就完事了！ 

多環(huán)境變量

什么是多環(huán)境變量？

項(xiàng)目在運(yùn)行時(shí)會(huì)根據(jù)啟動(dòng)的指令來運(yùn)行不同的環(huán)境，在不同的環(huán)境中，我們配置對(duì)應(yīng)所需的變量來滿足我們的開發(fā)需求，稱為多環(huán)境變量。

環(huán)境一般分為開發(fā)環(huán)境，測(cè)試環(huán)境，生產(chǎn)環(huán)境

配置流程

1、在項(xiàng)目根目錄下的package.json中配置serve test build

通過 --mode xxx 來執(zhí)行不同環(huán)境

"scripts": {
? "serve": "vue-cli-service serve --open",
? "test": "vue-cli-service build --mode testing",
? "build": "vue-cli-service build",
}

–open 是運(yùn)行的時(shí)候自動(dòng)開出頁面

• 通過 npm run serve 啟動(dòng)本地 , 執(zhí)行 development
• 通過 npm run test 打包測(cè)試 , 執(zhí)行 testing
• 通過 npm run build 打包正式 , 執(zhí)行 production

2、在項(xiàng)目根目錄下創(chuàng)建.env.*文件

.env.development 本地開發(fā)環(huán)境配置

NODE_ENV='development'

.env.production 正式環(huán)境配置

?NODE_ENV='production'

.env.staging 測(cè)試環(huán)境配置

NODE_ENV='production'

3.在src下面創(chuàng)建一個(gè)config文件夾下面配置三個(gè)相對(duì)應(yīng)的的js

重新配置三個(gè)是因?yàn)樾薷钠饋矸奖?，不需要重啟?xiàng)目，符合開發(fā)習(xí)慣。

// 根據(jù)環(huán)境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config

配置對(duì)應(yīng)環(huán)境的變量，拿本地環(huán)境文件 env.development.js 舉例，用戶可以根據(jù)需求修改

// 本地環(huán)境配置
module.exports = {
? title: 'vue-h5-template',
? baseUrl: 'http://localhost:9018', // 項(xiàng)目地址
? baseApi: 'https://test.xxx.com/api', // 本地api請(qǐng)求地址
? APPID: 'xxx',
? APPSECRET: 'xxx'
}

4.在我們根目錄下的src文件內(nèi)main.js文件中引入

import {baseUrl} from "./config/index";
// 因?yàn)閷?dǎo)出的是一個(gè)對(duì)象，結(jié)構(gòu)賦值
console.log(baseUrl);

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論