vue項目的環境變量

關於項目中環境變量的總結

背景

項目環境通常分爲開發環境，測試環境，線上環境
由於每一個環境的接口域名、webpack 配置都是不一樣的，因此在打包構建時，咱們須要區分這些環境，這時就用到了環境變量
在工做中使用到了兩種方法來區分，下面將這兩種方式一一列舉出來
技術框架是vue-cli@2.x

首先看下下面的解釋，後面會用到
< process 對象是一個全局變量，提供 Node.js 進程的有關信息以及控制進程。 由於是全局變量，因此無需使用 require()
< process.env屬性返回一個包含用戶環境信息的對象

1、process.env.npm_config_argv和webpack的插件DefinePlugin配合使用

process.env.npm_config_argv能夠獲取npm命令行的參數
通常咱們build時，會根據不一樣環境使用相應環境的接口域名，咱們能夠在執行build時添加參數

在package.json裏面scripts的字段配置以下

"scripts": { "dev": "node build/dev-server.js", "start": "npm run dev", "build": "node build/build.js" }

config文件目錄以下

|---config 啓動配置 |---index.js 項目配置文件 |---dev.env.js 開發環境變量 |---test.env.js 測試環境變量 |---prod.env.js 生產環境變量

config/dev.env.js裏面的代碼以下

module.exports = { NODE_ENV:'"development"', ENV_NAME:'"development"', API_ROOT:'"//www.test.abc.cn"' }

config/test.env.js裏面的代碼以下

module.exports = { NODE_ENV:'"production"', ENV_NAME:'"test"', API_ROOT:'"//www.test.abc.cn"' }

config/prod.env.js裏面的代碼以下

module.exports = { NODE_ENV:'"production"', ENV_NAME:'"production"', API_ROOT:'"//www.abc.cn"' }

config/index.js裏面的代碼以下

if (process.env.ENV_NAME === 'development') { module.exports = require('./dev.env.js') } else if (process.env.ENV_NAME === 'test') { module.exports = require('./test.env.js') } else { module.exports = require('./prod.env.js') } 

注意：由於是和webpack的插件DefinePlugin配合使用的，因此上面環境變量的代碼須要先寫單引號再寫雙引號
修改config/index.js文件裏面部分配置以下

var _origin = JSON.parse(process.env.npm_config_argv).original module.exports = { build: { env: (_origin[2] && _origin[2] == '--test') ? require('./test.env') : require('./prod.env') ... }, dev: { env: require('./dev.env'), ... } }

在build/webpack.base.conf.js裏面修改部分代碼以下

var env = config.dev.env var webpackConfig = merge(baseWebpackConfig, { ... plugins: [ new webpack.DefinePlugin({ 'process.env': env }), ... ]

在build/webpack.prod.conf.js裏面修改部分代碼以下

var env = config.build.env var webpackConfig = merge(baseWebpackConfig, { ... plugins: [ new webpack.DefinePlugin({ 'process.env': env }), ... ]

測試環境：在終端輸入 npm run build --test
線上環境：在終端輸入 npm run build --prod

在代碼裏面使用環境變量
src/api/index.js

import axios from 'axios' const root = process.env.API_ROOT export const requestLogin = params => { return axios.post(`${root}/api/jiekou`, params).then(res => res.data) }

2、使用cross-env配置

通常直接在package.json裏面scripts的字段配置如 "build:test":"NODE_ENV=production ENV_NAME=test node build/build.js",
在代碼的編譯環境中能夠直接process.env.ENV_NAME取到剛纔設置的ENV_NAME環境變量
因爲在windows平臺上執行npm run build:test 時遇到NODE_ENV=production會卡住，因此cross-env就出來了,不一樣平臺使用惟一指令，無需擔憂跨平臺問題

安裝cross-env包
執行npm i --save-dev cross-env

在package.json裏面scripts的字段配置以下

"scripts": { "dev": "cross-env NODE_ENV=development ENV_NAME=development node build/dev-server.js", "start": "npm run dev", "build:test":"cross-env NODE_ENV=production ENV_NAME=test node build/build.js", "build:prod":"cross-env NODE_ENV=production ENV_NAME=production node build/build.js" }

config文件下面的內容和上面的第一種方法裏面的config配置的同樣

上面的配置完成後就能夠在編譯環境中就可使用process.env.設置的變量名 來使用了
可是若是想在執行環境中使用設置的環境變量是訪問不到的，由於process對象是提供 Node.js 進程的有關信息以及控制進程，在執行環境下是訪問不到的
因此若是在不光在編譯環境下使用還要在執行環境中使用，有一下兩個方案，下面的兩個方案都是基於上面的cross-env配置的

1. 使用插件 DefinePlugin，配置以下
   在build/webpack.base.conf.js裏面修改部分代碼以下

var env = config.dev.env var webpackConfig = merge(baseWebpackConfig, { ... plugins: [ new webpack.DefinePlugin({ 'process.env': env }), ... ]

在build/webpack.prod.conf.js裏面修改部分代碼以下

var env = config.build.env var webpackConfig = merge(baseWebpackConfig, { ... plugins: [ new webpack.DefinePlugin({ 'process.env': env }), ... ]

這樣配置後，在執行環境中能夠直接使用process.env.設置的變量名來訪問設置的環境變量
在代碼裏面使用環境變量
src/api/index.js

import axios from 'axios' const root = process.env.API_ROOT export const requestLogin = params => { return axios.post(`${root}/api/jiekou`, params).then(res => res.data) }

2.不使用DefinePlugin插件，在業務代碼裏面須要用到環境變量的地方引入import appConst from '/config/index'
使用的時候直接用appConst.設置的變量名
注意，使用此方法，須要將config文件夾下的各個環境配置文件裏面的內容的引號去掉

如

// config/test.env.js裏面的代碼以下 module.exports = { NODE_ENV:'"production"', ENV_NAME:'"test"', API_ROOT:'"//www.test.abc.cn"' } // 改成 module.exports = { NODE_ENV:"production", ENV_NAME:"test", API_ROOT:"//www.test.abc.cn" }

測試環境：在終端輸入 npm run build:test
線上環境：在終端輸入 npm run build:prod

看了上面兩種方法，小夥伴以爲哪一種更方便呢，我的以爲方法二用cross-env更方便，推薦使用