VUE | 配置环境变量

news/2024/7/10 1:16:55 标签: vue.js, 前端, vue

本篇目录

1. 创建开发环境配置文件
2. 创建正式环境配置文件
3. 在代码中访问环境变量
4. 加载环境变量

在 Vue 项目中是使用 .env 文件来定义和使用不同的环境变量，这些文件在 Vue 项目根目录下创建。推荐有几种环境就创建几个 .env 文件，下面就开发环境和生产环境这两种环境来简单说明一下配置环境变量的方法。

1. 创建开发环境配置文件

创建名为.env.development文件，并写入变量。

NODE_ENV = 'development'
VUE_DATA_API = 'http://localhost:8000'

2. 创建正式环境配置文件

创建名为.env.production文件，并写入变量。

NODE_ENV = 'production'
VUE_DATA_API = 'http://101.156.193.11:8000'

3. 在代码中访问环境变量

在代码中使用使用 process.env 对象来访问这些环境变量，例如：process.env.NODE_ENV 。

4. 加载环境变量

在构建或运行Vue项目时，根据.env文件的名称，它们会被自动加载到项目中。例如.env.development文件，它将在开发模式下加载。

如果项目使用的是 Vue CLI 脚手架，则可以通过在命令行中添加 --mode 参数来指定要加载哪种模式的环境变量。例如：vue-cli-service serve --mode development 会在运行时加载 .env.development 文件中的变量。下面是几个命令行实例：

  "scripts": {
  	// 运行默认加载开发环境变量
    "serve": "vue-cli-service serve",
    // 运行指定加载生产环境变量
    "serve:pro": "vue-cli-service serve --mode production",
    // 运行指定加载开发环境变量
    "serve:dev": "vue-cli-service serve --mode development",
    // 构建默认加载生产环境变量
    "build": "vue-cli-service build",
    // 构建指定加载生产环境变量
    "build:pro": "vue-cli-service build --mode production",
  }