Vue, react project. env environment variable principle analysis

Vue, react project. env environment variable principle analysis

Introduction:

.envThe file extension vue, reactenvironment variables of the project, I believe we are more used up, vueand reactof cliwhere these configured, all we can directly, but another frame or another project, this problem is more trouble.

For example, now writing Ant Design Proproject, it is for internal use umito do these configurations, default only supports .envfiles that I want to support .env.developmentand .env.productionor other mode of environment variables how to do? Of course, umi@3 can be used config.dev.js, config.jsand config.prod.jsthese files are combined UMI_ENVto solve these problems, but I feel very upset.

So you began to write a nuxtproject and found it inside the configuration file nuxt.config.jsalso supports only env:{}object extensions, so the question is, then I want to support .env.developmentand .env.productionor other mode of environment variables how to do?

Since the change of the project we can not control, then we can figure out vuewhere the envfile is loaded principles of maintaining the status quo.

Here are the solutions.

1. Create a new .env.development file

NODE_ENV=development
VUE_APP_WEB_TITLE=test
VUE_APP_BASE_URL=http://0.0.0.0

2. Core implementation, parsing the env file

Install dependencies first
dotenv
dotenv-expand

According to vue-clithe source
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/util/resolveClientEnv.js
rewrite

parseEnv.js

const fs = require('fs')
const path = require('path')
const dotenv = require('dotenv') // 解析.env.*文件为键值对，并写入环境变量。
const variableExpansion = require('dotenv-expand') // 拿到dotenv解析的参数，扩展计算机上已经存在的环境变量（存在就赋值）。

const resolve = dir => path.join(__dirname, dir)
const prefixRE = /^VUE_APP_/

/*
这里加载的是development 模式文件，需要其他的可以根据启动参数来动态修改，或者NODE_ENV来修改

ag：根据NODE_ENV来修改
const env = variableExpansion(
  dotenv.parse(fs.readFileSync(resolve(`./.env.${process.env.NODE_ENV}`)))
)
*/
const env = variableExpansion(
  dotenv.parse(fs.readFileSync(resolve(`./.env.development`)))
)
Object.keys(env).forEach(key => {
    
    
  if (prefixRE.test(key) || key === 'NODE_ENV') {
    
    
    env[key] = JSON.stringify(env[key]) // JSON.stringify 的目的是为了给webpack.DefinePlugin 的值是 '"development"'，DefinePlugin插件配置要求
  } else {
    
    
    Reflect.deleteProperty(env, key)
  }
})

module.exports = env

3. Configure webpack and inject environment variables into the project

const webpack = require('webpack')

// 加载.env.* 环境变量
const env = require('./parseEnv')

console.log(env) // {NODE_ENV: '"development"',VUE_APP_WEB_TITLE: '"test"',VUE_APP_BASE_URL: '"http://0.0.0.0"'}

module.exports = {
    
    
  plugins: [new webpack.DefinePlugin({
    
     'process.env': env })]
}

4. Use

console.log(process.env.VUE_APP_BASE_URL) // 'http://0.0.0.0'

Reference link

1.https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js

2.https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/util/resolveClientEnv.js