vue项目使用.env文件配置全局环境变量的方法

下面是详细讲解：

1. 简介

在 Vue 项目中，我们通常会使用一些全局的环境变量来区分不同的运行环境（如 dev、test、prod 等）。Vue 项目提供了 .env 文件来配置这些全局变量。不同于 .env.development 和 .env.production 等特殊的 .env 文件， .env 文件是通用的。这意味着，不管你是在开发环境还是生产环境下运行 Vue 项目，都会加载 .env 文件中的变量。

2. 操作步骤

2.1 在项目中创建 .env 文件

首先，在项目的根目录下创建一个名为 .env 的文件：

# .env
VUE_APP_ENV=dev

在这个 .env 文件中，我们定义了一个环境变量 VUE_APP_ENV，它的值为 dev。

2.2 在项目中使用环境变量

在 Vue 项目中，我们可以通过 process.env 对象来访问环境变量。例如，我们可以在 main.js 文件中这样使用环境变量：

// main.js
console.log(process.env.VUE_APP_ENV)

这行代码会输出环境变量 VUE_APP_ENV 的值，也就是 dev。

2.3 根据环境变量配置打包命令

在 Vue 项目中，我们通常会根据不同的环境变量来配置不同的打包命令。这可以通过 package.json 文件中的 scripts 字段来实现。例如，我们可以这样配置打包命令：

{
  "scripts": {
    "build:prod": "vue-cli-service build --mode production",
    "build:dev": "vue-cli-service build"
  }
}

这个配置中定义了两个打包命令：build:prod 和 build:dev。其中，build:prod 使用 --mode 参数设置为 production，代表生产环境下的打包；而 build:dev 则没有设置 --mode 参数，代表开发环境下的打包。这个命令会根据 .env 文件中的环境变量来自动选择使用哪个打包命令。

2.4 示例代码

以下是一个简单的示例代码，用于演示如何使用 .env 文件配置全局环境变量。

创建一个新的 Vue 项目：

vue create env-test

在 env-test 项目的根目录下创建一个 .env 文件，内容如下：

VUE_APP_ENV=dev

在 src/main.js 文件中，增加如下代码：

console.log(process.env.VUE_APP_ENV)

最后，我们可以使用 npm run serve 命令来启动项目，并查看输出结果。若能正确输出 dev，则说明我们已经成功地使用 .env 文件配置了全局环境变量。同时，我们也可以使用 npm run build 命令来打包项目，并根据环境变量自动选择打包命令。

希望这个攻略对您有所帮助。