vue环境变量 - 技术栈

vue环境变量

是谁眉眼2025-12-13 17:30

1.Vite 的 import.meta.env//配置对象

import.meta.env.MODE//环境变量

例子：

import.meta.env.VITE_API_bangcommunity_URL这个环境变量的值是在项目构建时通过环境配置文件设置的，通常在以下文件中定义：

.env.development - 开发环境

.env.test - 测试环境

.env.production - 生产环境

package.json 脚本配置

csharp 复制代码

 "scripts": {
    "dev": "vite --mode development",
    "test": "vite --mode test",
    "prod": "vite --mode prod.autocfg",
    "build": "vite build",
    "build:dev": "vite build --mode uat.autocfg",
    "build:prod": "vite build --mode prod.autocfg",

  },

csharp 复制代码

    "prod": "set NODE_ENV=production&& vite --mode prod.autocfg"

.env.uat.autocfg文件

csharp 复制代码

VITE_API_bangcommunity_URL=https://uoa.bangcommunity.com
User_Center_Url=https://zjt.djbx.com

.env.prod.autocfg 文件

csharp 复制代码

VITE_API_bangcommunity_URL=https://h5.bangcommunity.com
User_Center_Url=https://zj.djbx.comchc

只有当 mode 设置为 development、production 或 test 时，才会自动设置对应的 NODE_ENV

对于自定义 mode（如 prod.autocfg），Vite 不会自动设置 NODE_ENV

csharp 复制代码

 "scripts": {
    "dev": "vite --mode development",
    "prod": "vite --mode production ",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production ",

  },

2.Webpack / Create React App 的 process.env.NODE_ENV

console.log(process.env.NODE_ENV);

// 'development' 或 'production'

const baseURL = process.env.NODE_ENV === 'development' ?

'https://uoa.bangcommunity.com':

'https://h5.bangcommunity.com' ;

package.json 脚本配置

csharp 复制代码

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