环境变量配置 (6)

在 Node.js 中，process.env对象提供了对环境变量的访问。

可以在webpack.base.js中测试一下：

console.log(process.env);

node-env

可以使用 --node-env 选项来设置 process.env.NODE_ENV

npx webpack --node-env production   # process.env.NODE_ENV = 'production'

"scripts": {
  "serve": "webpack-dev-server -c build/webpack.dev.js --node-env development",
  "build:dev": "webpack -c build/webpack.prod.js --node-env production",
  "preview": "serve ./dist -l 4000 -s"  
},

cross-env

如果希望设置其他环境变量的键值对，我们可以使用cross-env，而不必担心跨操作系统的兼容问题。

pnpm add cross-env -D

"scripts": {
  "serve": "cross-env CURRENT_ENV=dev webpack-dev-server -c build/webpack.dev.js",
	"build:dev": "cross-env CURRENT_ENV=prod webpack -c build/webpack.prod.js",
  "preview": "serve ./dist -l 4000 -s"  
},

dotenv 管理环境变量

pnpm add dotenv -D

环境变量文件

# .env
VUE_APP_TITLE=webpack+ts+vue
BASE_URL=/

# .env.production
VUE_APP_USER_NODE_ENV = production
CURRENT_ENV = prod
VUE_APP_API_URL = /api

# .env.development
VUE_APP_USER_NODE_ENV = development
CURRENT_ENV = dev
VUE_APP_OPEN = true
VUE_APP_API_URL = /api

代码处理

const fs = require('fs');

// 根据环境来读取配置文件
const dotenvFiles = [
  `.env`,
  `.env.${process.env.NODE_ENV}`,
  `.env.${process.env.NODE_ENV}.local`
].filter(Boolean)

// 遍历文件注入所有环境变量
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv').config({
      path: dotenvFile
    })
  }
})

package.json

"scripts": {
  "serve": "webpack-dev-server -c build/webpack.dev.js --node-env development",
  "build:dev": "webpack -c build/webpack.prod.js --node-env production",
  "preview": "serve ./dist -l 4000 -s"  
},

注意：环境变量读取的值都是字符串，如果给webpack属性赋值，需要注意类型

将变量同步为全局环境变量,可以使用webpack内置的DefinePlugin插件

......
const webpack = require('webpack');

/**
 * @type {import('webpack').Configuration}
 */
module.exports = {
  ......
  plugins: [
    new webpack.DefinePlugin({
      'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
      'process.env.CURRENT_ENV': JSON.stringify(process.env.CURRENT_ENV),
      'process.env.VUE_APP_API_URL': JSON.stringify(process.env.VUE_APP_API_URL),
    }),
  ],
}

这样我们可以在前端页面也能访问到process.env.BASE_URL，process.env.CURRENT_ENV和process.env.VUE_APP_API_URL