vue3打包命令如何支持使用指定的配置文件 “build“: “vue-tsc --noEmit vite build“, .env.production

在 Vue 3 项目中，如果你想在打包时使用指定的配置文件（如.env.production），有几种方式可以实现。你当前的"build": "vue-tsc --noEmit && vite build"命令默认会加载.env.production文件（当运行vite build时），但如果你想更明确地指定或切换不同的环境文件，可以使用以下方法：

方法一：使用--mode参数（推荐）

json

{ "scripts": { "build": "vue-tsc --noEmit && vite build --mode production", "build:staging": "vue-tsc --noEmit && vite build --mode staging", "build:test": "vue-tsc --noEmit && vite build --mode test" } }

这样：

• npm run build→ 加载.env.production

• npm run build:staging→ 加载.env.staging

• npm run build:test→ 加载.env.test

方法二：使用环境变量

json

{ "scripts": { "build": "vue-tsc --noEmit && NODE_ENV=production vite build", "build:dev": "vue-tsc --noEmit && NODE_ENV=development vite build" } }

方法三：创建自定义配置文件

创建vite.config.prod.ts：

typescript

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], // 生产环境特定配置 build: { minify: 'terser', sourcemap: false, rollupOptions: { // 你的配置 } } })

然后在package.json中：

json

{ "scripts": { "build": "vue-tsc --noEmit && vite build --config vite.config.prod.ts" } }

方法四：使用 cross-env（跨平台）

如果需要跨平台支持，可以使用cross-env：

bash

npm install -D cross-env

json

{ "scripts": { "build": "vue-tsc --noEmit && cross-env NODE_ENV=production vite build", "build:staging": "vue-tsc --noEmit && cross-env NODE_ENV=staging vite build" } }

环境文件命名规则

Vite 遵循以下优先级加载环境文件：

text

.env # 所有环境都加载 .env.local # 所有环境都加载，但被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载，但被 git 忽略

最佳实践建议

对于你的情况，我建议使用方法一：

json

{ "scripts": { "build": "vue-tsc --noEmit && vite build --mode production", "build:stage": "vue-tsc --noEmit && vite build --mode staging" } }

这样：

• 明确指定使用哪个环境文件

• 便于扩展多个环境配置

• 符合 Vite 官方推荐做法

然后在代码中通过import.meta.env访问环境变量，例如：

javascript

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

这样你的.env.production文件中的VITE_API_URL就会被正确加载。