vue2中使用.env文件

关注

原创 2025-01-03 18:37:05 1.7k 阅读 AI 写同款· GEO 优化 ›

VUE项目使用.env配置多种环境以及如何加载环境 build:stage”: “vue-cli-service build --mode staging”，使用npm run build:stage指令时会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件，此时NODE_ENV 的值将被覆盖为 production，而不是 staging然后构建出生产环境应用。NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。阅读详情

1、作用：在vue项目中，使用.env文件来加载不同环境下面的请求域名、环境变量等。

2、配置（以.env.test文件为例）：

① 在项目根目录下新建名称 .env.test 的文件
② 文件内容如下：

变量的名称必须以 VUE_APP_ 开头

# just a flag
ENV = 'test'

# base api
#VUE_APP_BASE_API = '/api'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:8080'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:80/'
#VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'
VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'

添加下面的代码在配置文件中，可以用来提高热更新的速度：
VUE_CLI_BABEL_TRANSPILE_MODULES = true;

在这里插入图片描述

③ 获取变量：process.env.VUE_APP_XXX

3、加载：

.env.development ：用于本地及开发环境，仅在开发时加载（名称固定）。
.env.production ：用于生产（正式）环境，仅在生产环境加载（名称固定）。
.env.test ：用于测试环境，仅在测试环境加载（自定义名称）。
命令配置：

在package.json中写入（主要是在原有的命令后添加 --mode 名称）

{
  "name": "vue3_work",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve-test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test"
  }
}