VUE2 中 process.env是什么意思

在 Vue 2 中，process.env 是一个Node.js 环境变量对象，用于在构建时访问系统的环境变量。

基本概念

1. process.env 是什么？

• 这是 Node.js 中的全局对象

• 只在构建时生效，在浏览器运行时不存在

• Vue CLI 基于 webpack 的 DefinePlugin 将 process.env 的值替换为实际内容

2. 常见的环境变量

javascript

// Vue CLI 内置的process.env.NODE_ENV    
// 'development', 'production', 'test'process.env.BASE_URL
// 基础 URL（vue.config.js 中配置）
// 自定义变量（需要以 VUE_APP_ 开头）
process.env.VUE_APP_API_URL
process.env.VUE_APP_TITLE

如何定义环境变量

方式1：项目根目录创建 .env 文件

text

# .env                # 所有环境都会加载
# .env.development    # 开发环境
# .env.production     # 生产环境
# .env.staging        # 预发布环境

文件内容：

bash

# 必须以 VUE_APP_ 开头才能被客户端访问
VUE_APP_API_URL= 
VUE_APP_TITLE=My App
# 非 VUE_APP_ 开头的只能在服务端访问CUSTOM_KEY=some_value

方式2：命令行临时定义

json

{  "scripts": {    "serve": "vue-cli-service serve",    "build:dev": "vue-cli-service build --mode development",    "build:prod": "vue-cli-service build --mode production"  }}

方式3：配置文件 vue.config.js

javascript

module.exports = {  chainWebpack: config => {    config.plugin('define').tap(args => {      args[0]['process.env'].CUSTOM_VAR = JSON.stringify('custom value')      return args    })  }}

在代码中使用

javascript

// 在 Vue 组件或 JS 文件中export default {  data() {    return {      apiUrl: process.env.VUE_APP_API_URL,      env: process.env.NODE_ENV    }  },  created() {    console.log('当前环境:', process.env.NODE_ENV)    console.log('API地址:', process.env.VUE_APP_API_URL)        if (process.env.NODE_ENV === 'development') {      console.log('开发模式')    }  }}

常用示例

1. 不同环境配置不同 API 地址

bash

# .env.developmentVUE_APP_API_URL=http://localhost:3000/apiVUE_APP_DEBUG=true# .env.productionVUE_APP_API_URL=https://api.myapp.comVUE_APP_DEBUG=false

2. 在 HTML 中使用

html

<!-- public/index.html --><title><%= process.env.VUE_APP_TITLE %></title>

3. 条件判断

javascript

// 按环境引入不同配置const config = process.env.NODE_ENV === 'production'   ? require('./config.prod')   : require('./config.dev')

重要提示

1. 变量命名规则

• 必须以 VUE_APP_ 开头才能在客户端代码中使用

• 内置的 NODE_ENV 和 BASE_URL 可直接使用

2. 安全性

• 不要存储敏感信息（如密码、密钥）

• 环境变量会打包到前端代码中，可被查看

3. 类型问题

• 所有环境变量都是字符串

• 如果需要布尔值，需要手动转换

javascript

// 字符串转布尔值const debug = process.env.VUE_APP_DEBUG === 'true'

4. 重启服务

• 修改 .env 文件后需要重启开发服务器

process.env 让你能够根据不同的运行环境（开发/测试/生产）使用不同的配置，是项目配置管理的重要工具。