vue3+vite与vue2+webpack 分别配置环境变量

在项目目录下新建 .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'
1
2
3
4

.env.production

NODE_ENV = 'production'
VUE_APP_ENV = 'production'
VUE_APP_BASE_URL = ''
VUE_APP_OUTPUT = 'dist'
1
2
3
4

2.js使用

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

二. vue3+vite配置环境变量

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

.env.development

NODE_ENV = 'development'
VITE_APP_ENV = 'development'
VITE_APP_BASE_URL = '/api'
VITE_APP_OUTPUT = 'dev'
1
2
3
4

.env.production

NODE_ENV = 'production'
VITE_APP_ENV = 'production'
VITE_APP_BASE_URL = ''
VITE_APP_OUTPUT = 'dist'
1
2
3
4

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/, '')
        }
      },
    },
    ...
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. js使用

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

三. 总结