vue index.html环境变量,vue项目的环境变量

关于项目中环境变量的总结

背景

项目环境通常分为开发环境，测试环境，线上环境

由于每一个环境的接口域名、webpack 配置都是不一样的，因此在打包构建时，咱们须要区分这些环境，这时就用到了环境变量

在工做中使用到了两种方法来区分，下面将这两种方式一一列举出来

技术框架是vue-cli@2.xjavascript

首先看下下面的解释，后面会用到

< process 对象是一个全局变量，提供 Node.js 进程的有关信息以及控制进程。 由于是全局变量，因此无需使用 require()

< process.env属性返回一个包含用户环境信息的对象vue

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

process.env.npm_config_argv能够获取npm命令行的参数

通常咱们build时，会根据不一样环境使用相应环境的接口域名，咱们能够在执行build时添加参数java

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

"scripts": {

"dev": "node build/dev-server.js",

"start": "npm run dev", "build": "node build/build.js" }

config文件目录以下webpack

|---config 启动配置

|---index.js 项目配置文件

|---dev.env.js 开发环境变量

|---test.env.js 测试环境变量

|---prod.env.js 生产环境变量

config/dev.env.js里面的代码以下ios

module.exports = {

NODE_ENV:'"development"',

ENV_NAME:'"development"',

API_ROOT:'"//www.test.abc.cn"' }

config/test.env.js里面的代码以下web

module.exports = {

NODE_ENV:'"production"',

ENV_NAME:'"test"',

API_ROOT:'"//www.test.abc.cn"' }

config/prod.env.js里面的代码以下vue-cli

module.exports = {

NODE_ENV:'"production"',

ENV_NAME:'"production"',

API_ROOT:'"//www.abc.cn"' }

config/index.js里面的代码以下npm

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文件里面部分配置以下json

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配置的

使用插件 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更方便，推荐使用