package.json 脚本配置使用环境文件

脚本使用环境文件

"scripts": {
  "dev": "vite",
  "build:prod": "vite build",
  "build:stage": "vite build --mode staging",
  "preview": "vite preview"
}

1. dev：运行开发服务器，默认使用 .env.development 文件。

   npm run dev
   

   • 这个脚本没有显式指定 --mode 参数，因此 Vite 会默认使用 development 模式。
   • 加载 .env.development 文件中的环境变量。

2. build:prod：构建生产环境的应用，默认使用 .env.production 文件。

   npm run build:prod
   

   • 这个脚本没有显式指定 --mode 参数，因此 Vite 会默认使用 production 模式。
   • 加载 .env.production 文件中的环境变量。

3. build:stage：构建预发布环境的应用，使用 .env.staging 文件。

   npm run build:stage
   

   • 这个脚本显式指定了 --mode staging 参数。
   • 加载 .env.staging 文件中的环境变量。

4. preview：预览生产环境构建的应用，默认使用 .env.production 文件。

   npm run preview
   

   • 这个脚本没有显式指定 --mode 参数，因此 Vite 会默认使用 production 模式。
   • 加载 .env.production 文件中的环境变量。

如何指定使用哪个环境文件

Vite 会根据 --mode 参数来决定使用哪个环境文件。具体规则如下：

• 如果没有指定 --mode 参数，Vite 会根据命令的上下文使用默认的模式：

  • vite 或 vite dev：默认使用 development 模式。
  • vite build 或 vite preview：默认使用 production 模式。

• 如果指定了 --mode 参数，Vite 会使用对应的模式，并加载相应的环境文件：

  • --mode development：加载 .env.development 文件。
  • --mode production：加载 .env.production 文件。
  • --mode staging：加载 .env.staging 文件。

示例

假设你有以下环境文件：

.env.development：

VITE_API_URL=http://localhost:3000/api
VITE_APP_MODE=development

.env.production：

VITE_API_URL=https://api.example.com
VITE_APP_MODE=production

.env.staging：

VITE_API_URL=https://staging-api.example.com
VITE_APP_MODE=staging

在代码中，你可以通过 import.meta.env 访问这些环境变量：

console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_MODE);

根据你运行的脚本，Vite 会加载相应的环境文件：

• 运行 npm run dev 时，输出：

  http://localhost:3000/api
  development
  

• 运行 npm run build:prod 或 npm run preview 时，输出：

  https://api.example.com
  production
  

• 运行 npm run build:stage 时，输出：

  https://staging-api.example.com
  staging