第五章-Vite配置多环境

1.说明

就好像你之前在Vue-Cil中的env一样。

Vite官网说明
VbenAdmin官方说明

2.创建默认配置文件

根目录下创建：.env文件

2.1.原代码

1
2
3
VITE_PORT = 3100
VITE_GLOB_APP_TITLE = Vben Admin
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin

2.2.带注解代码

1
2
3
4
5
6
7
8
9
# 运行的端口
VITE_PORT = 3100

# 应用名称
VITE_GLOB_APP_TITLE = Vben Admin

# 应用短名称
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin

3.创建生产配置文件

根目录下创建：.env.production文件

3.1.原代码

1
2
3
4
5
6
7
8
9
10
VITE_USE_MOCK = true
VITE_PUBLIC_PATH = /
VITE_DROP_CONSOLE = true
VITE_BUILD_COMPRESS = 'none'
VITE_GLOB_API_URL=/api
VITE_GLOB_UPLOAD_URL=/upload
VITE_GLOB_API_URL_PREFIX=
VITE_USE_IMAGEMIN= true
VITE_USE_PWA = false
VITE_LEGACY = false

3.2.带注释代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 是否使用mock
VITE_USE_MOCK = true

# 公共路径
VITE_PUBLIC_PATH = /

# 是否删除所有日志打印
VITE_DROP_CONSOLE = true

# 是否启用gzip或brotli压缩。
# 可选：gzip | brotli | none
# 如果你需要多个表格，你可以使用`,`来分隔。
VITE_BUILD_COMPRESS = 'none'

# 应用基本接口地址
VITE_GLOB_API_URL=/api

# 文件上传地址，可选
# 可以通过nginx转发或直接写入实际地址。
VITE_GLOB_UPLOAD_URL=/upload

# 接口前缀
VITE_GLOB_API_URL_PREFIX=

# 是否启用图像压缩
VITE_USE_IMAGEMIN= true

#使用PWA
VITE_USE_PWA = false

# 是否与旧版浏览器兼容
VITE_LEGACY = false

4.创建开发配置文件

根目录下创建：.env.development文件

4.1.原代码

1
2
3
4
5
6
7
8
VITE_PORT = 3100
VITE_USE_MOCK = true
VITE_PUBLIC_PATH = /
VITE_PROXY=[["/api","http://localhost:3000"],["/upload","http://localhost:3001/upload"]]
VITE_DROP_CONSOLE = false
VITE_GLOB_API_URL=/api
VITE_GLOB_UPLOAD_URL=/upload
VITE_GLOB_API_URL_PREFIX=

4.2.带注解代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
VITE_PORT = 3100

# 是否使用mock
VITE_USE_MOCK = true

# 公共路径
VITE_PUBLIC_PATH = /

# 跨域代理，你可以配置多个代理。
VITE_PROXY=[["/api","http://localhost:3000"],["/upload","http://localhost:3001/upload"]]
# VITE_PROXY=[["/api","https://vvbin.cn/test"]]

# 是否删除所有日志打印
VITE_DROP_CONSOLE = false

# 应用基本接口地址
VITE_GLOB_API_URL=/api

# 文件上传地址，可选
VITE_GLOB_UPLOAD_URL=/upload

# 接口前缀
VITE_GLOB_API_URL_PREFIX=

5.测试配置

目录：src\App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>{{ vitePort }}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const vitePort = ref(import.meta.env.VITE_PORT);
    return {
      vitePort,
    };
  },
});
</script>