VUE项目使用.env配置多种环境以及如何加载环境

第一步,创建多个环境配置文件

Vue CLI 项目默认使用 .env 文件来定义环境变量。你可以通过创建不同的 .env 文件来为不同环境设置不同的环境变量,例如:

  • .env —— 所有模式共用
  • .env.local —— 所有模式共用,但不会被 git 提交,自动添加到.gitignore
  • .env.development —— 仅开发模式使用,使用npm run server时默认会加载此配置文件
  • .env.developmen.local—— 仅开发模式使用,但会被 git 忽略自动添加到.gitignore,使用npm run server时默认会加载此配置文件
  • .env.production —— 仅生产模式使用,使用npm run build时默认会加载此配置文件
  • .env.staging—— 仅staging模式使用,使用需要配置–mode staging
    在这里插入图片描述

第二步,编写内容

env.development中的内容

# 页面标题
VUE_APP_TITLE = 管理系统

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

在配置文件中定义自定义变量时,一定要以 VUE_APP_开头,否则Vue无法读取此变量

第三步,在package.json文件中编写启动命令

除了.env文件会自动被加载外,其他环境需要手动的添加加载指令

"scripts": {
    "serve": "vue-cli-service serve", 
    "serve:prod": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "lint": "vue-cli-service lint"
  }

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

  • development 模式用于 vue-cli-service serve
  • test 模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。

npm run serve 加载的是在 package.json 文件中 scripts 部分定义的 serve 脚本所指定的环境。

当你运行 npm run serve 时,实际上是在调用 vue-cli-service serve 命令,所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量,它的值将取决于模式,例如,在 production 模式下被设置为 “production”,在 test 模式下被设置为 “test”,默认则是 “development”。Vue CLI 会根据是否存在 .env.development 文件来加载开发环境的环境变量。如果你想要为特定的环境指定不同的环境变量,你可以创建相应的 .env.development.local 或 .env.production.local 文件,这些文件不会被 git 提交,可以用来存储敏感信息或本地特定的配置。

NODE_ENV 将决定您的应用运行的模式,是开发,生产还是测试,因此也决定了创建哪种 webpack 配置。

例如通过将 NODE_ENV 设置为 “test”,Vue CLI 会创建一个优化过后的,并且旨在用于单元测试的 webpack 配置,它并不会处理图片以及一些对单元测试非必需的其他资源。

同理,NODE_ENV=development 创建一个 webpack 配置,该配置启用热更新,不会对资源进行 hash 也不会打出 vendor bundles,目的是为了在开发的时候能够快速重新构建。

“serve”: “vue-cli-service serve” 使用npm run serve指令运行时,会默认开发模式,所以不用写 --mode,此配置会自动加载开发模式下的.env.development配置文件,将 NODE_ENV 设置为 “development” ,应用运行的模式为开发。

“serve:prod”: “vue-cli-service serve --mode prod” 使用npm run serve:prod指令运行时,会加载生产模式下的.env.production配置文件,将 NODE_ENV 设置为 “production” ,应用运行的模式为生产。

“build”: “vue-cli-service build” 使用npm run build指令时,会自动加载生产模式下的.env.production配置文件,将 NODE_ENV 设置为 “production” ,构建出生产环境应用。

当你运行 vue-cli-service build 命令时,无论你要部署到哪个环境,应该始终把 NODE_ENV 设置为 “production” 来获取可用于部署的应用程序,因为部署肯定是要在生产环境当中,性能高。意思就是无论部署开发还是测试还是生产环境配置如果不配置NODE_ENV 为 “production” ,就会根据读的模式来设置NODE_ENV 值,那么构建出的环境应用也是可变的。如果配置NODE_ENV 为 “production” ,那么不管读的模式是啥加载的配置是什么都构建出生产环境应用。

示例:Staging 模式

假设我们有一个应用包含以下 .env 文件:

VUE_APP_TITLE=My App

和 .env.staging 文件

NODE_ENV=production
VUE_APP_TITLE=My App (staging)

vue-cli-service build 会在生产模式下加载可能存在的 .env、.env.production 和 .env.production.local 文件,将 NODE_ENV 设置为 “production” ,然后构建出生产环境应用。

“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,构建出的应用都是生产环境应用,但是在 staging 版本中,process.env.VUE_APP_TITLE 被覆写成了另一个值。

第四步,输出环境变量并演示

输出环境变量

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  mounted(){
    console.log(process.env)
  }

})
npm run serve:prod

在这里插入图片描述
![在这里插入图片描

### 正确配置 `.env` 文件进行环境变量设置 在前端项目中,特别是基于 Vue.js项目,`.env` 文件用于定义不同环境下的配置项。这些文件允许开发者轻松切换不同的配置而无需修改源代码。 #### 创建和命名 `.env` 文件 对于一个典型的 Vue 项目,可以根据需求创建多种类型的 `.env` 文件: - **通用配置**:`.env` 文件中的变量将在所有环境加载[^3]。 - **特定模式配置**:通过创建带有模式后缀的文件(如 `.env.development`, `.env.production`),可以在不同环境下应用特定配置[^2]。 例如,在项目的根目录下建立如下结构: ```plaintext project-root/ ├── .env # 所有环境共享的基础配置 ├── .env.development # 开发环境专用配置 └── .env.production # 生产环境专用配置 ``` #### 设置环境变量 每种 `.env` 文件内的键值对遵循 `VUE_APP_` 前缀规则以便于识别并生效。这是因为只有以 `VUE_APP_` 或者其他由框架预设前缀开头的变量才会被嵌入到客户端侧的应用程序中。 示例内容可能像这样编写: ```bash # .env.example (作为模板提供给团队成员) # 应用名称 VUE_APP_NAME=MyAwesomeApp # API 地址 VUE_APP_API_URL=http://localhost:8080/api/v1/ # 版本号 VUE_APP_VERSION=1.0.0 ``` #### 使用环境变量 一旦设置了上述环境变量,在应用程序内部就可以方便地访问它们。Vue CLI 自动将这些变量注入到了 process.env 对象里,因此可以直接读取: ```javascript console.log(process.env.VUE_APP_NAME); // 输出 "MyAwesomeApp" console.log(process.env.VUE_APP_API_URL); // 输出 "http://localhost:8080/api/v1/" console.log(process.env.VUE_APP_VERSION); // 输出 "1.0.0" ``` 此外,如果希望某些敏感信息不提交至版本控制系统,则可利用 `.gitignore` 来忽略对应的本地化配置文件(比如 `.env.local` 和 `.env.*.local`)。这种方式既保护了隐私又不影响协作效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值