在项目目录下新建 .env.development 和 .env.production 文件

一. vue2+webpack配置环境变量

1. 配置文件.env内容，注意: 前缀是VUE， ‘/api’ 为代理地址

.env.development

NODE_ENV = 'development'
VUE_APP_ENV = 'development'
VUE_APP_BASE_URL = '/api'
VUE_APP_OUTPUT = 'dev'

.env.production

NODE_ENV = 'production'
VUE_APP_ENV = 'production'
VUE_APP_BASE_URL = ''
VUE_APP_OUTPUT = 'dist'

2.js使用

axios.defaults.baseURL=process.env.VUE_APP_BASE_URL; 

二. vue3+vite配置环境变量

1. 配置文件.env内容，注意: 前缀是VITE

.env.development

NODE_ENV = 'development'
VITE_APP_ENV = 'development'
VITE_APP_BASE_URL = '/api'
VITE_APP_OUTPUT = 'dev'

.env.production

NODE_ENV = 'production'
VITE_APP_ENV = 'production'
VITE_APP_BASE_URL = ''
VITE_APP_OUTPUT = 'dist'

2. 配置vite.config.ts文件

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {// 根据当前工作目录中的 `mode` 加载 .env 文件loadEnv(mode, process.cwd());return {server:{https: false,// hrm: true,port: 8008,host: 'localhost',proxy: {'/api': {target: 'http://127.0.0.1:8089',changeOrigin: true,ws: true,rewrite: (path) => path.replace(/^\/api/, '')}},},...}
})

3. js使用

axios.defaults.baseURL= import.meta.env.VITE_APP_BASE_URL,

三. 总结