[前端工程化]NODE_ENV设置总结解决跨平台如果有的小伙伴用Linux操作系统,而有的小伙伴用Windows操作系统

在前端工程配置里, 我们经常会用NODE_ENV对开发环境, 测试环境, 准生产环境和线上环境, 设置不同的环境变量

解决跨平台

如果有的小伙伴用Linux操作系统, 而有的小伙伴用Windows操作系统, 会因为环境变量的配置方式不同而出现问题

这时可以用cross-env解决

安装开发环境的依赖

$ npm i cross-env -D

可同时设置多个环境变量, 注意等号两边不能有空格, 这样在process.env对象里可以找到我们自定义的环境变量, 可以将它们打印出来

"scripts": {
  "env-test": "cross-env VAR_1=var1 VAR_2=var2 NODE_ENV=test node ./evn-test-print.js"
}

给源码设置全局变量

我们可以读取node环境变量并用webpack自带的DefinePlugin插件将其写入全局, 注意需要转为JSON字符串

import { Plugin } from 'webpack'
const webpack = require('webpack')

const commonPlugins: Plugin[] = [
  new webpack.DefinePlugin({
    'process.env': JSON.stringify({
      VAR_1: process.env.var1,
      VAR_2: process.env.var2,
      NODE_ENV: process.env.NODE_ENV
    })
  })
]

vue官方脚手架中的应用

文档见: cli.vuejs.org/zh/guide/mo…

如果我们启动开发环境的脚本为vue-cli-service serve --open, 其实相当于执行了vue-cli-service serve --open --mode development, 这时vue脚手架会读取我们自定义的.env.development文件内定义的环境变量

如果我们的文件名为.env.dev, 应该手动指定vue-cli-service serve --open --mode dev