knowLedge-VueCLI项目中环境变量的定义与使用

1. env

1.1简介

在 Vue CLI 创建的项目中，你可以通过 .env 文件来定义环境变量。Vue CLI 支持多种 .env 文件，它们根据文件名中的前缀来决定何时加载和使用这些环境变量。

以下是一些常见的 .env 文件及其用途：

• .env：在任何环境下都会加载的环境变量。
• .env.local：本地环境（例如，开发环境）特有的环境变量。在构建和运行时，这个文件会被加载，但不会被提交到版本控制系统。
• .env.development：只在开发环境下加载的环境变量。
• .env.production：只在生产环境下加载的环境变量。

1.2定义环境变量

在 .env 文件中，可以定义环境变量，例如：

VUE_APP_API_URL=https://api.example.com

1.3访问环境变量

process.env.VUE_APP_API_URL 来访问这个环境变量：

console.log(process.env.VUE_APP_API_URL); // 输出: https://api.example.com

请注意，环境变量的名称必须以 VUE_APP_ 开头，这是 Vue CLI 的一个特殊要求，用于确保环境变量被正确注入到客户端代码中。

此外，可以在 .env 文件中定义其他环境变量，例如：

NODE_ENV=development

这些环境变量不会自动注入到客户端代码中，但它们可以在构建过程中被使用，例如，你可以在 vue.config.js 文件中根据 process.env.NODE_ENV 的值来配置不同的构建选项。

2. process.env

process.env 是 Node.js 的一个全局对象，用于访问环境变量。在template结构中无法识别，需在js中进行赋值转换

1. 使用环境变量文件 ：在前端项目中，你可以创建一个环境变量文件，例如 .env，并在其中定义你的环境变量。然后，你可以使用 dotenv 库（在前端项目中通常需要使用 dotenv-webpack 或类似的库）来加载这个文件。这样，你就可以在前端代码中使用 process.env 对象来访问这些环境变量了。

2. 使用构建工具的配置选项 ：许多前端构建工具（如 Webpack、Rollup 等）允许你在构建过程中设置配置选项。你可以使用这些配置选项来定义环境变量，并在前端代码中使用它们。例如，在 Webpack 中，你可以使用 DefinePlugin 来定义全局常量，这些常量可以在前端代码中访问。

3. 使用服务器端渲染（SSR）：如果你的前端项目使用了服务器端渲染，你可以在服务器端设置环境变量，并在渲染过程中将这些变量传递给前端。然后，你可以在前端代码中使用这些变量。

3. 在 .env 文件中，可以定义环境变量为字符串

VUE_APP_BRUMB_SHOW=true

转换为布尔值进行判断

 this.crumbShow=process.env.VUE_APP_BRUMB_SHOW === "false" ? false : true;;