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

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

vue 中有個概念就是模式，默認先vue cli 有三個模式

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

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

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

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

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

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

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

基本格式如下：

NODE_ENV=環(huán)境名稱VUE_APP_URL=對應的環(huán)境地址

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

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

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

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

使用

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

首頁你需要哪個環(huán)境，就執(zhí)行哪個環(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)境對應的url。

比如我們在axios請求中，就可以把它的baseURL設(shè)置為 process.env.VUE_APP_URL 

如下圖所示：

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

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

多環(huán)境變量

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

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

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

配置流程

1、在項目根目錄下的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 是運行的時候自動開出頁面

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

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

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

NODE_ENV='development'

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

?NODE_ENV='production'

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

NODE_ENV='production'

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

重新配置三個是因為修改起來方便，不需要重啟項目，符合開發(fā)習慣。

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

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

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

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

import {baseUrl} from "./config/index";
// 因為導出的是一個對象，結(jié)構(gòu)賦值
console.log(baseUrl);

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

最新評論