vue项目的环境变量
关于项目中环境变量的总结
背景
项目环境一般分为开发环境，测试环境，线上环境
因为每个环境的接口域名、webpack 配置都是不同的，所以在打包构建时，我们需要区分这些环境，这时就用到了环境变量
在工作中使用到了两种方法来区分，下面将这两种方式一一列举出来
技术框架是vue-cli@2.x
首先看下下面的解释，后面会用到
< process 对象是一个全局变量，提供 Node.js 进程的有关信息以及控制进程。 因为是全局变量，所以无需使用 require()
< process.env属性返回一个包含用户环境信息的对象
一、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)
}
二、使用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配置的
- 使用插件 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更方便，推荐使用
