vue-cli如何添加多种环境变量

vue-cli如何添加多种环境变量

目前webpack(vue-cli) 打包有两种变量，development, productor, 如何添加一个 test的测试环境呢

vue-cli 3.0

vue-cli3.0简化了业务需求，没有那么多额外的配置，目前想改变环境变量，官方默认如此, 网友1

官方默认两种类型 develpoment production,而咱们实际开发过程当中，会有本地开发，测试环境，正式环境等等，于是这两种环境变量是不够的，于是须要第三种乃至多种变量环境

基于vue-cli3.0进行配置

You can specify env variables by placing the following files in your project root:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

An env file simply contains key=value pairs of environment variables:

FOO=bar
VUE_APP_SECRET=secre

上面所述，在根目录配置 .env,.env.[mode]...的文件，其次须要以VUE_APP开头进行变量申明

搭建项目进行测试

...
.env.development
.env.production
.env.test
package.json
...

每一个文件的具体内容

.env.development

/* VUE_APP_CURRENTMODE 当前环境变量 */
VUE_APP_CURRENTMODE = 'development'
VUE_APP_ENV = 'development环境'
VUE_APP_LOGOUT_URL = 'http://l72.16.0.95/logout_development'

.env.production

VUE_APP_CURRENTMODE = 'production'
VUE_APP_ENV = 'production环境'
VUE_APP_LOGOUT_URL = 'http://l72.16.0.95/logout_production'

.env.test

/* NODE_ENV 目的用于指定是一开发仍是生产形式进行操做 */
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_ENV = 'test环境'
VUE_APP_LOGOUT_URL = 'http://baidu.cn/logout_test'

package.json

...
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    /* --mode test 用来传递参数 */
    "test-serve": "vue-cli-service serve --mode test"
  },
 ...

NODE_ENV, VUE_APP_* ...须要多注意一下

经过上面配置，VUE_APP_LOGOUT_URL 在不一样环境变量生成不一样的对应退出连接，
一下即是具体展现效果

yarn serve // 开发环境

yarn test-serve // 测试环境

yarn build // 生产环境

经过这样配置，只用经过命令行即可以生成不一样环境下的项目，如此即可以不用每次都要去改动具体的变量了

vue-cli2配置

如今vue-cli2的文档被vue-cli3替代了，只能用这种最low但却最简单的办法来解决问题

...
webpack.base.conf.js
webpack.dev.conf.js
webpack.dev.conf.test.js
webpack.prod.conf.js
...

build文件夹下 新增一个须要的环境 webpack.dev.conf.test.js直接复制 webpack.dev.conf.js便可，
config文件夹下，添加一个dev.env.test.js

webpack.dev.conf.test.js

...
plugins: [
  new webpack.DefinePlugin({
  // 环境变量  改成本身设定的变量便可
  'process.env': require('../config/dev.env.test') 
})
...

dev.env.test.js 依旧复制对应 dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"testing"',
  VUE_APP_CURRENTMODE: '"testing"',
  VUE_APP_ENV: '"testing环境"',
  VUE_APP_LOGOUT_URL: '"http://l72.16.0.95/logout_testing"'
})

此处注意申明的变量 都须要 '"var"'这样定义，否则拿不到值

最后在package.json
中添加 "test-dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.test.js",便可

最后各类效果图

1. npm run dev
   

2. npm run test-dev
   

3. npm run build
   

总结

• 开发环境依旧是两种 development production,只是在这两种基础上进行具体指定不一样变量罢了，于是所谓的测试环境只是在生产环境中，另外列出一种变量，这样用于区分生产与测试的不一样而已
• 目前vue-cli2和vue-cli3就均可以使用了，细节确定都须要更多优化
• 对应的代码码云

2019-02-14 vuecli2 补充

package.json

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "test-dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.test.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "node build/build.js",
  "test": "node build/build.js --test=123 --build=12346"
}

• 方式一

  查了一些资料，对package.json有了更多的一些了解，才发现其实经过环境变量会有更加简洁的方案。npm_lifecycle_event

修改以前的方案

prod.env.js

const env = process.env.npm_lifecycle_event === 'build' ? require('../config/prod.env') : require('../config/prod.env.test')

• 方式二

  经过传参模式进行判断 process.argv --表示传参，我添加=是为了表示传参方便，便于识别

"test": "node build/build.js --test=123 --build=12346"

获取参数

const PARAMS = process.argv.splice(2)
function getKeyValue (params = []) {
  if (!Array.isArray(params)) throw new Error('请传入数组格式参数')
  const obj = {}
  params.forEach(item => {
    const o = item.slice(2).split('=')
    obj[o[0]] = o[1]
  })
  return obj
}
const r = getKeyValue(PARAMS) // { test: '123', build: '12346' }

如此即可以在require时进行判断，具体选择哪个便可

总结，这样就又多了几种方式，如此便更好使用