Vue3——环境变量的配置

合集 - Vue3(8)

1.Vue3——Vite + element-plus +Vue3 项目搭建、"@"别名设置2024-02-27

2.Vue3——环境变量的配置2024-03-01

3.Vue3——SVG 图标配置2024-03-044.Vue3——集成 sass2024-03-055.Vue3——集成mock 模拟数据生成器2024-03-126.Vue3——axios 安装和封装2024-03-137.Vue3——Vue Router2024-05-098.Vue3——Pinia+Pinia持久化2024-05-25

收起

vue3环境变量的配置

• 开发环境（development）
• 测试环境（testing）
• 生产环境（production）
  项目根目录分别添加 开发、生产和测试环境的文件!

.env.development
.env.production
.env.test

文件内容

变量必须以 VITE_ 为前缀才能暴露给外部读取

NODE_ENV = 'development'
VITE_APP_TITLE = '开发Title'
VITE_APP_BASE_API = '/dev-api'

NODE_ENV = 'production'
VITE_APP_TITLE = '生产Title'
VITE_APP_BASE_API = '/prod-api'

NODE_ENV = 'test'
VITE_APP_TITLE = '测试Title'
VITE_APP_BASE_API = '/test-api'

配置运行命令：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"
  },

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