在 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.productionnpm run build:staging→ 加载.env.stagingnpm run build:test→ 加载.env.test方法二使用环境变量json{ scripts: { build: vue-tsc --noEmit NODE_ENVproduction vite build, build:dev: vue-tsc --noEmit NODE_ENVdevelopment vite build } }方法三创建自定义配置文件创建vite.config.prod.tstypescriptimport { 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-envbashnpm install -D cross-envjson{ scripts: { build: vue-tsc --noEmit cross-env NODE_ENVproduction vite build, build:staging: vue-tsc --noEmit cross-env NODE_ENVstaging 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访问环境变量例如javascriptconsole.log(import.meta.env.VITE_API_URL)这样你的.env.production文件中的VITE_API_URL就会被正确加载。
在 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.productionnpm run build:staging→ 加载.env.stagingnpm run build:test→ 加载.env.test方法二使用环境变量json{ scripts: { build: vue-tsc --noEmit NODE_ENVproduction vite build, build:dev: vue-tsc --noEmit NODE_ENVdevelopment vite build } }方法三创建自定义配置文件创建vite.config.prod.tstypescriptimport { 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-envbashnpm install -D cross-envjson{ scripts: { build: vue-tsc --noEmit cross-env NODE_ENVproduction vite build, build:staging: vue-tsc --noEmit cross-env NODE_ENVstaging 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访问环境变量例如javascriptconsole.log(import.meta.env.VITE_API_URL)这样你的.env.production文件中的VITE_API_URL就会被正确加载。
