环境变量的配置

在 Vue 3 项目中配置环境变量是一种常见的做法，可以让你根据不同环境（开发、测试、生产等）使用不同的配置。这有助于在不同环境下运行相同的应用程序时，能够适应各自的环境特性，如 API 地址、数据库连接字符串等。

注意：env里面千万别写分号

1. 使用 .env 文件

Vue CLI 项目支持使用 .env 文件来管理环境变量。这些文件位于项目根目录下，根据不同的环境，可以创建多个文件：

• .env：所有环境共享的变量。
• .env.development：开发环境专用的变量。
• .env.production：生产环境专用的变量。
• .env.test：测试环境专用的变量。

这些文件的内容会被注入到 Vue 应用程序的全局上下文中，可以通过 process.env.VARIABLE_NAME 访问。

示例 .env.development

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '库库林-沙琪马' # 项目名称
VITE_APP_BASE_API = '/dev-api' # 接口地址
VITE_SERVE = 'http://localhost:3000' # 开发阶段服务器地址
VITE_PORT = 3000

示例 .env.production

# 生产环境
NODE_ENV = 'production'
VITE_APP_TITLE = '库库林-沙琪马'
VITE_APP_BASE_API = '/prod-api'

2.配置运行命令

打开 package.json 文件：

"scripts": {
  "dev": "vite --open",
  "build:test": "vue-tsc && vite build --mode test",
  "build:pro": "vue-tsc && vite build --mode production",
  "preview": "vite preview"
},

1. dev: vite --open - 这个脚本用于启动开发服务器，并自动打开浏览器。vite --open 命令会启动 Vite 开发服务器，并在浏览器中打开项目。

2. build:test: vue-tsc && vite build --mode test - 这个脚本用于构建测试环境的项目。首先，vue-tsc 用于运行 TypeScript 编译器，确保代码没有类型错误。然后，vite build --mode test 用于构建项目，同时设置构建模式为 test。

3. build:pro: vue-tsc && vite build --mode production - 这个脚本用于构建生产环境的项目。同样，首先运行 vue-tsc 进行 TypeScript 编译，然后使用 vite build --mode production 构建项目，设置构建模式为 production。

4. preview: vite preview - 这个脚本用于启动预览服务器，通常用于预览构建后的项目。vite preview 命令会启动一个静态服务器，用于服务构建后的文件。

通过 import.meta.env 获取环境变量