vue3+ts vite配置环境变量

最新推荐文章于 2025-07-07 15:34:45 发布

原创最新推荐文章于 2025-07-07 15:34:45 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

首先添加：
.env.development

# // 开发环境 
VITE_ENV = 'development'
VITE_API = '/api' 
outputDir = dist_dev // 打出包的名称
VITE_BASE_URL = http://xxxxxxxxx:xxxx/

.env.production

# // 生产环境 
VITE_ENV = 'production'
VITE_API = '/api' //代理名可配置为/
outputDir = dist_dev // 打出包的名称
VITE_BASE_URL = http://xxxxxxxxx:xxxx/ //请求前缀

和.env.test 文件夹，和src同级

# // 测试环境
VITE_ENV = 'dist_test'
VITE_API = '/api' 
outputDir = dist_dev // 打出包的名称
VITE_BASE_URL = http://xxxxxxxxx:xxxx/

*注：.env文件中前缀必须是VITE开头的，否则会识别不到

其次配置vite.config.ts文件

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
	const env = loadEnv(mode, process.cwd())
	return {
		server: {
	      proxy: {
	        [env.VITE_API]: {
	           target: env.VUE_BASE_URL,
	           changeOrigin: true,
	           rewrite: (path) => path.replace(/^\/api/, '')
	         }
	      },
	      host: '0.0.0.0', // 监听所有网络接口
	      port: 3000, // 自定义端口号（可选）
	      strictPort: true // 确保端口被占用时会抛出错误（可选）
	    },
	}
})

最后配置package.json文件

"dev": "vite --mode development",
"test": "vite --mode test",
"build": "vite build",
"build:test": "vite build --mode test",
"build:dev": "vite build --mode development",