vue2 环境变量

在 Vue2 项目中，环境变量用于区分开发、测试、生产等不同环境的配置（如接口地址、密钥等），避免硬编码敏感信息，同时方便不同环境下的配置切换。

 

 

文件命名规则：

 

• .env：任何环境都加载
• .env.[mode]：特定环境加载（mode 可自定义，如 development、production、test）

二、定义环境变量

1. 变量命名规范：
   必须以 VUE_APP_ 为前缀，否则无法在代码中访问（Vue CLI 约定）。
   例如：VUE_APP_BASE_API、VUE_APP_TITLE。

 

示例文件：

  .env.development（开发环境，npm run serve 时加载）：

 

# 开发环境 API 地址
VUE_APP_BASE_API = 'http://dev.api.example.com'
# 开发环境标识
VUE_APP_ENV = 'development'
#默认环境  NODE_ENV ='development'    可以更改值

 

===========================================================================================

console.log( process.env.NODE_ENV)     //不声明系统 默认值为： development

如果更改值为：

NODE_ENV='test'

console.log( process.env.NODE_ENV)      //值为：test

===========================================================================================

 

.env.production（生产环境，npm run build 时加载）：

# 生产环境 API 地址
VUE_APP_BASE_API = 'http://prod.api.example.com'
# 生产环境标识
VUE_APP_ENV = 'production'

.env（所有环境通用，若其他文件有同名变量会被覆盖）：

# 应用名称（所有环境共用）
VUE_APP_APP_NAME = 'My Vue2 App'

三、在代码中使用环境变量

定义后的环境变量可通过 process.env 在项目中直接访问，支持在 JavaScript、Vue 模板、HTML 中使用。

在 JS/Vue 脚本中使用：

// main.js 或组件中
console.log(process.env.VUE_APP_BASE_API); // 输出对应环境的 API 地址
console.log(process.env.VUE_APP_ENV); // 输出环境标识（如 'development'）

在 Vue 模板中使用：

<template>
  <div>
    <p>当前环境：{{ process.env.VUE_APP_ENV }}</p>  如果获取不到：通过定义变量获取
    <p>API 地址：{{ process.env.VUE_APP_BASE_API }}</p>
  </div>
</template>

在 HTML 中使用（如 public/index.html）：

html
预览
<title><%= process.env.VUE_APP_APP_NAME %></title>
<script>
  console.log('环境变量：<%= process.env.VUE_APP_ENV %>');
</script>

自定义环境（如测试环境）

创建 .env.test 文件：

VUE_APP_BASE_API = 'http://test.api.example.com'
VUE_APP_ENV = 'test'

在 package.json 中添加启动脚本（指定 --mode test）：

"scripts": {
  "serve": "vue-cli-service serve", // 默认开发环境
  "build": "vue-cli-service build", // 默认生产环境
  "build:test": "vue-cli-service build --mode test" // 测试环境构建
}

运行命令生效：

npm run build:test # 构建测试环境版本，加载 .env.test 变量

 

项目中使用

 开发环境.

# 开发环境配置
NODE_ENV=development
VUE_APP_API_URL=http://dev-api.example.com
VUE_APP_WS_URL=ws://dev-api.example.com/ws
VUE_APP_DEBUG=true
VUE_APP_VERSION=1.0.0-dev

 

// 创建axios实例
const service = axios.create({
  // 从环境变量获取基础URL
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 5000 // 请求超时时间
})

 

mounted() {
    // 根据环境变量执行不同操作
    if (process.env.VUE_APP_DEBUG === 'true') {
      console.log('进入调试模式')
      // 开发环境下的一些调试操作
    }
  }