Vue 配置参数、环境配置、缓存配置、主题配置
# 配置参数
项目的环境变量配置位于项目根目录下的 .env、.env.development、.env.production
具体可以参考 Vite 文档 - 环境变量和模式 (opens new window)
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
1
2
3
4
2
3
4
温馨提醒：
- 只有以
VITE_开头的变量会被嵌入到客户端侧的包中，您可以项目代码中这样访问它们：
console.log(import.meta.env.VITE_PROT);
1
- 以
VITE_GLOB_*开头的的变量，在打包的时候，会被加入 _app.config.js 配置文件当中.
# .env 详解：
所有环境适用
# 访问端口
VITE_PORT = 3100
# 软件标题
VITE_GLOB_APP_TITLE = JeeSite 快速开发平台
# 软件英文名（小写、全英文、无空格、无特殊字符）
VITE_GLOB_APP_SHORT_NAME = jeesite
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# .env.development 详解：
# 访问项目的根路径
VITE_PUBLIC_PATH = /
# 路由模式（true: history、false: hash）
VITE_ROUTE_WEB_HISTORY = true
# 代理设置，可配置多个，不能换行，格式：[访问接口的根路径, 代理地址, 是否保持Host头]
# VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]]
VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]]
# 是否删除 console 调试信息
VITE_DROP_CONSOLE = false
# 是否启用 Mock 模拟测试（已弃用）
VITE_USE_MOCK = false
# 访问接口的根路径（例如：https://vue.jeesite.com）建议为空
VITE_GLOB_API_URL =
# 访问接口的前缀，在根路径之后
VITE_GLOB_API_URL_PREFIX = /js
# 访问接口的管理基础路径
VITE_GLOB_ADMIN_PATH = /a
# 上传文件接口的根路径（已弃用）
VITE_GLOB_UPLOAD_URL = /upload
# 文件预览类型（true、oss）
VITE_FILE_PREVIEW = true
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
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
# .env.production 详解：
# 访问项目的根路径
VITE_PUBLIC_PATH = /
# 路由模式（true: history、false: hash）
VITE_ROUTE_WEB_HISTORY = true
# 是否删除 console 调试信息
VITE_DROP_CONSOLE = true
# 是否启用 Mock 模拟测试
VITE_USE_MOCK = false
# 是否启用 gzip 或 brotli 压缩，多个使用 `,` 分隔
# 支持选项: gzip | brotli | none
VITE_BUILD_COMPRESS = 'none'
# 是否删除源文件时使用压缩，默认为 false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
# 访问接口的根路径（例如：https://vue.jeesite.com）建议为空
VITE_GLOB_API_URL =
# 访问接口的前缀，在根路径之后
VITE_GLOB_API_URL_PREFIX = /js
# 访问接口的管理基础路径
VITE_GLOB_ADMIN_PATH = /a
# 上传文件接口的根路径（已弃用）
VITE_GLOB_UPLOAD_URL = /upload
# 文件预览类型（true、oss）
VITE_FILE_PREVIEW = true
# 是否启用 Vue PWA
VITE_USE_PWA = false
# 是否兼容 Chrome 内核比较低的浏览器，如 QQ 浏览器（编译包会变大）
VITE_LEGACY = true
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
33
34
35
36
37
38
39
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
33
34
35
36
37
38
39
# 生产环境动态配置
当执行 yarn build 构建项目之后，会自动生成 _app.config.js 文件并插入 index.html。
注意: 开发环境不会生成
// _app.config.js
// 变量名命名规则 __PRODUCTION__xxx_CONF__ xxx：为 .env 配置的 VITE_GLOB_APP_SHORT_NAME
window.__PRODUCTION__JEESITE__CONF__ = {
VITE_GLOB_APP_TITLE: 'JeeSite快速开发平台',
VITE_GLOB_APP_SHORT_NAME: 'jeesite',
VITE_GLOB_API_URL: '',
VITE_GLOB_API_URL_PREFIX: '/js',
VITE_GLOB_ADMIN_PATH: "/a",
VITE_GLOB_UPLOAD_URL: '/upload'
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
_app.config.js 用于项目在打包后，需要动态修改配置的需求，如接口地址。不用重新进行打包，可在打包后修改 /dist/_app.config.js 内的变量，刷新即可更新代码内的局部变量。
# 路由模式 History 设置
.env 文件
# 路由模式（true: history、false: hash）
VITE_ROUTE_WEB_HISTORY = true
1
2
2
nginx.conf 文件
server {
# 前端Vue页面
location / {
root /jeesite-vue/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# 后端接口服务
location /js {
proxy_pass http://127.0.0.1:8980/js;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 如何获取配置参数
想要获取 _app.config.js 内的变量，可以使用 src/hooks/setting/index.ts (opens new window) 提供的函数来进行获取
# 如何新增配置参数
首先在
.env或者对应的开发环境配置文件内，新增需要可动态配置的变量，需要以VITE_GLOB_开头VITE_GLOB_开头的变量会自动加入环境变量，通过在src/types/config.d.ts内修改GlobEnvConfig和GlobConfig两个环境变量的值来定义新添加的类型useGlobSetting (opens new window) 函数中添加刚新增的返回值即可
const {
VITE_GLOB_APP_TITLE,
VITE_GLOB_API_URL,
VITE_GLOB_APP_SHORT_NAME,
VITE_GLOB_API_URL_PREFIX,
VITE_GLOB_UPLOAD_URL,
} = ENV;
export const useGlobSetting = (): SettingWrap => {
// Take global configuration
const glob: Readonly<GlobConfig> = {
title: VITE_GLOB_APP_TITLE,
apiUrl: VITE_GLOB_API_URL,
shortName: VITE_GLOB_APP_SHORT_NAME,
urlPrefix: VITE_GLOB_API_URL_PREFIX,
uploadUrl: VITE_GLOB_UPLOAD_URL,
adminPath: adminPath,
ctxAdminPath: ctxAdminPath,
};
return glob as Readonly<GlobConfig>;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 项目配置
主要用于配置项目内展示的内容、布局、文本等效果，存于 localStorage 中。
配置文件路径：src/settings/projectSetting.ts (opens new window)
// ! 改动后需要清空浏览器缓存
const setting: ProjectConfig = {
// 是否显示SettingButton
showSettingButton: true,
// 是否显示主题切换按钮
showDarkModeToggle: true,
// 设置按钮位置 可选项
// SettingButtonPositionEnum.AUTO: 自动选择
// SettingButtonPositionEnum.HEADER: 位于头部
// SettingButtonPositionEnum.FIXED: 固定在右侧
settingButtonPosition: SettingButtonPositionEnum.AUTO,
// 权限缓存存放位置。默认存放于localStorage
permissionCacheType: CacheTypeEnum.LOCAL,
// 会话超时处理方案
// SessionTimeoutProcessingEnum.ROUTE_JUMP: 路由跳转到登录页
// SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗，覆盖当前页面
sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
// 网站灰色模式，用于可能悼念的日期开启
grayMode: false,
// 色弱模式
colorWeak: false,
// 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内
fullContent: false,
// 主题内容宽度
contentMode: ContentEnum.FULL,
// 是否显示logo
showLogo: true,
// 是否显示底部信息 copyright
showFooter: true,
// 头部配置
headerSetting: {
// 背景色
bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
// 固定头部
fixed: true,
// 是否显示顶部
show: true,
// 主题
theme: MenuThemeEnum.LIGHT,
// 开启锁屏功能
useLockPage: true,
// 显示全屏按钮
showFullScreen: true,
// 显示文档按钮
showDoc: true,
// 显示消息中心按钮
showNotice: true,
// 显示菜单搜索按钮
showSearch: true,
},
// 菜单配置
menuSetting: {
// 背景色
bgColor: SIDE_BAR_BG_COLOR_LIST[0],
// 是否固定住菜单
fixed: true,
// 菜单折叠
collapsed: false,
// 折叠菜单时候是否显示菜单名
collapsedShowTitle: false,
// 是否可拖拽
canDrag: true,
// 是否显示
show: true,
// 菜单宽度
menuWidth: 200,
// 菜单模式
mode: MenuModeEnum.INLINE,
// 菜单类型
type: MenuTypeEnum.MIX,
// 菜单主题
theme: MenuThemeEnum.LIGHT,
// 分割菜单
split: true,
// 顶部菜单布局
topMenuAlign: 'center',
// 折叠触发器的位置
trigger: TriggerEnum.HEADER,
// 手风琴模式，只展示一个菜单
accordion: true,
// 在路由切换的时候关闭左侧混合菜单展开菜单
closeMixSidebarOnChange: false,
// 左侧混合菜单模块切换触发方式 CLICK | HOVER
mixSideTrigger: MixSidebarTriggerEnum.HOVER,
// 是否固定左侧混合菜单
mixSideFixed: false,
},
// 多标签
multiTabsSetting: {
// 刷新后是否保留已经打开的标签页
cache: false,
// 开启
show: true,
// 开启快速操作
showQuick: true,
// 是否可以拖拽
canDrag: true,
// 是否显示刷新那妞
showRedo: true,
// 是否显示折叠按钮
showFold: true,
},
// 动画配置
transitionSetting: {
// 是否开启切换动画
enable: true,
// 动画名
basicTransition: RouterTransitionEnum.FADE_SIDE,
// 是否打开页面切换loading
openPageLoading: true,
//是否打开页面切换顶部进度条
openNProgress: false,
},
// 是否开启KeepAlive缓存 开发时候最好关闭,不然每次都需要清除缓存
openKeepAlive: true,
// 自动锁屏时间，为 0 不锁屏，单位分钟
lockTime: 0,
// 显示面包屑
showBreadCrumb: true,
// 显示面包屑图标
showBreadCrumbIcon: false,
// 是否使用全局错误捕获
useErrorHandle: false,
// 是否开启回到顶部
useOpenBackTop: true,
// 是否可以嵌入iframe页面
canEmbedIFramePage: true,
// 切换界面的时候是否删除未关闭的message及notify
closeMessageOnSwitch: true,
// 切换界面的时候是否取消已经发送但是未响应的http请求。
// 如果开启，想对单独接口覆盖。可以在单独接口设置
removeAllHttpPending: false,
};
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
# 缓存配置
用于配置缓存内容加密信息，对缓存到浏览器的信息进行 AES 加密
在 /@/settings/encryptionSetting.ts (opens new window) 内可以配置 localStorage 及 sessionStorage 缓存信息
前提: 使用项目自带的缓存工具类 /@/utils/cache (opens new window) 来进行缓存操作
import { isDevMode } from '/@/utils/env';
// 缓存默认过期时间
export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
// 开启缓存加密后，加密密钥。采用aes加密（自行修改秘钥）
export const cacheCipher = {
key: '_11111000001111@',
iv: '@11111000001111_',
};
// 是否加密缓存，默认生产环境加密
export const enableStorageEncryption = !isDevMode();
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 多语言配置
用于配置多语言信息
在 src/settings/localeSetting.ts (opens new window) 内配置
export const LOCALE: { [key: string]: LocaleType } = {
ZH_CN: 'zh_CN',
EN_US: 'en',
};
export const localeSetting: LocaleSetting = {
// 是否显示语言选择器
showPicker: true,
// 当前语言
locale: LOCALE.ZH_CN,
// 默认语言
fallback: LOCALE.ZH_CN,
// 允许的语言
availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};
// 语言列表
export const localeList: DropMenu[] = [
{
text: '简体中文',
event: LOCALE.ZH_CN,
},
{
text: 'English',
event: LOCALE.EN_US,
},
];
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
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
# 主题配置
用于预设一些颜色数组，在 src/settings/designSetting.ts (opens new window) 内配置
// 顶部背景色预设
export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
'#1951be',
'#1890ff',
'#151515',
'#ffffff',
'#009688',
'#5172DC',
'#e74c3c',
'#24292e',
'#394664',
'#001529',
'#383f45',
];
// APP主题色预设
export const APP_PRESET_COLOR_LIST: string[] = [
'#2a50ec',
'#1890ff',
'#009688',
'#536dfe',
'#ff5c93',
'#ee4f12',
'#0096c7',
'#9c27b0',
'#ff9800',
];
// 侧边栏菜单背景色预设
export const SIDE_BAR_BG_COLOR_LIST: string[] = [
'#ffffff',
'#001529',
'#212121',
'#273352',
'#191b24',
'#191a23',
'#304156',
'#001628',
'#28333E',
'#344058',
'#383f45',
];
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
33
34
35
36
37
38
39
40
41
42
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
33
34
35
36
37
38
39
40
41
42
# 组件默认配置
在 src/settings/componentSetting.ts (opens new window) 内配置
export default {
// 表格配置
table: {
// 可选的分页选项
pageSizeOptions: ['10', '20', '50', '80', '100'],
//默认每页显示多少条
defaultPageSize: 20,
},
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
