JeeSite Vue 快速开始、安装部署、编译打包
# 相关链接
- VSCode (opens new window) 或 WebStorm (opens new window) 或 IDEA (opens new window)- IDE 集成开发工具
- Node.js 22 (opens new window) 和 git (opens new window) - 开发环境
- Vite (opens new window) - 熟悉 Vite 特性
- Vue-v3 (opens new window) - 熟悉 Vue 基础语法
- TypeScript (opens new window) - 熟悉 TS 基本语法
- ES6+ (opens new window) - 熟悉 ES6 基本语法
- Vue-Router-v4 (opens new window) - 熟悉 vue-router 基本使用
- Vue-Vben-Admin (opens new window) - 熟悉 UI 及表单列表及常用组件使用
- Ant-Design-Vue (opens new window) - 熟悉 UI 基本使用
- JeeSite-v5 (opens new window) - 安装后台服务
# 推荐 VSCode 插件
- UnoCSS (opens new window) - UnoCSS 提示插件
- Iconify (opens new window) - Iconify 图标插件
- I18n-ally (opens new window) - i18n 插件
- Volar (opens new window) - Vue3 开发必备（Vetur禁用）
- ESLint (opens new window) - 脚本代码检查
- Prettier (opens new window) - 代码格式化
- Stylelint (opens new window) - CSS 格式化
- DotENV (opens new window) - .env 文件高亮
# 安装配置环境
1、如果没有安装 Node.js，下载地址：https://nodejs.org (opens new window)
# 验证
node -v
# 配置国内源
npm config set registry https://registry.npmmirror.com
1
2
3
4
2
3
4
提示
- v5.12.1 及以前版本最低要求 Node.js 18
- v5.13.0 及以后版本最低要求 Node.js 20
如果期望保留多个 node 版本，推荐使用 nvm (opens new window) 进行多版本切换
2、v5.9.2+ 推荐使用 Pnpm，如果没有安装 Pnpm 则执行安装
npm i -g pnpm
# 验证
pnpm -v
# 配置国内源
pnpm config set registry https://registry.npmmirror.com
1
2
3
4
5
2
3
4
5
3、v5.9.1 及以前版本，如果没有安装 Yarn 1.x 则执行安装
npm i -g yarn
# 验证
yarn -v
# 配置国内源
yarn config set registry https://registry.npmmirror.com
1
2
3
4
5
2
3
4
5
# 获取源代码
git clone https://gitee.com/thinkgem/jeesite-vue.git
cd jeesite-vue
# 注意：不要放到中文或带空格的目录下。
1
2
3
2
3
# 配置后端接口
1、文档 https://jeesite.com/docs/install-deploy/ 若已部署，请忽略。
2、打开 .env.development 文件，修改后台接口：
# 代理设置，可配置多个，不能换行，格式：[访问接口的根路径, 代理地址, 是否保持Host头]
# VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]]
VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]]
# 访问接口的根路径（例如：https://vue.jeesite.com）一般不需要填写
VITE_GLOB_API_URL =
# 访问接口的前缀，在根路径之后（对应后端 application.yml 中的 context-path 设置）
VITE_GLOB_API_URL_PREFIX = /js
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
提示
- 如果 “代码生成器” 提示404或无法打开，可尝试修改 VITE_PROXY 中的最后一个参数 Host 头，本地环境设置为 false，域名环境设置为 false，目的是在代理环境中是否转发 Host 请求头，出现一些跨域访问的问题。
- 如果出现跨域问题，后端服务 application.yml 中有跨域参数设置。
# 启动运行服务
1、安装依赖
npm run bootstrap
1
2、运行方式1：开发环境（会加载文件较多，便于调试，请耐心等待，请开启浏览器缓存）
npm run dev
1
3、运行方式2：生产预览（会编译打包整合文件，所以访问性能会大大提高，生产环境可以开启 gzip）
npm run preview
1
# 部署完成后访问
1、浏览器访问：http://127.0.0.1:3100 (opens new window)
2、默认最高管理员账号：system 密码：admin
3、恭喜您已经部署完成，开启您的开发之旅吧
# 新建一个模块包
1、进入菜单：系统管理 -> 系统设置 -> 模块管理，新建一个模块，填写：
- 模块名称：测试模块
- 模块编码：test
- 生成基础路径：填写 Vue 项目根路径
- 代码生成模板：生成 Vue 前端模块代码
点击 “保存并生成代码” 按钮，即可完成业务模块的工程代码新建（自动化生成模块工程源码）
2、进入 Vue 项目根目录，执行添加包命令：pnpm add @jeesite/test --workspace -w
3、模块创建完成。
# 部署到正式服务器
# 部署到 Nginx
1、前端项目编译后为静态资源，可以部署到 Nginx 上，或其他 Web 服务上，操作如下：
2、打开 .env.production 文件，根据您的需要，修改参数：
# 访问项目的根路径（确保与 Nginx 的 location / 部署路径一致）
VITE_PUBLIC_PATH = /
# 路由模式（true: history、false: hash）推荐设置为 true
VITE_ROUTE_WEB_HISTORY = true
# 访问接口的根路径（建议设置为空，当后端和前端域名不一致的时候才需要设置）
VITE_GLOB_API_URL =
# 访问接口的前缀，在根路径之后（对应后端的 server.servlet.context-path 参数一致）
VITE_GLOB_API_URL_PREFIX = /js
# 访问接口的管理基础路径（对应后端的 adminPath 参数一致）
VITE_GLOB_ADMIN_PATH = /a
# 文件预览类型（true、oss）
VITE_FILE_PREVIEW = true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
3、本地执行打包命令
npm run build
1
4、打包完成后，会在根目录生成 dist 文件夹，发布到 Nginx 服务。
5、如果还想修改一些参数，可以打开 _app.config.js 文件，无需重新进行打包：
// _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_FILE_PREVIEW: "true"
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
6、发布到 Nginx 的配置，参考 nginx.conf 文件如下：
http {
client_max_body_size 500M;
underscores_in_headers on;
server {
# 前端Vue页面（确保访问路径与 VITE_PUBLIC_PATH 一致）
# 采用 Vue history 模式时，您还需要增加 try_files 参数
location / {
root /jeesite-vue/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# 如果 VITE_PUBLIC_PATH 设置为 /vue，配置如下：
#location /vue {
# alias /jeesite-vue/dist;
# index index.html;
# try_files $uri $uri/ /vue/index.html;
#}
# 后端接口服务（确保与 application.yml 中的 server.servlet.context-path 一致）
location /js {
proxy_pass http://127.0.0.1:8980/js;
proxy_set_header Host $http_host;
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";
proxy_connect_timeout 180s;
proxy_send_timeout 180s;
proxy_read_timeout 180s;
proxy_next_upstream off;
proxy_buffering off;
}
}
}
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
7、系统默认开启了百度统计，可在 _app.config.js 中删除 var _hmt 后的代码，即关闭统计。
8、后端接口服务部署方法：部署到正式服务器
# 部署到 Tomcat
1、将 Vue 直接部署到后端的 Tomcat，无需安装 Nginx，操作如下：
2、打开后端 application.yml 配置文件，根据需要调整您的参数：
# 服务访问根路径
server:
servlet:
context-path: ~
# 前端配置的根路径（固定设置，不建议修改，对应前端 VITE_PUBLIC_PATH 参数一致）v5.11.0
vue:
ctxPath:
replaceText: /vuePath
# 前端资源文件访问根路径，映射到 src/main/resources/{vuePath} 文件夹 v5.7.0
# 如果设置的是 /vue，则映射目录为：src/main/resources/vue 文件夹
# 则浏览器访问为：http://127.0.0.1:8980/vue
# 该功能，会自动处理 Vue 的 history 路由模式
vuePath: /vue
# 设置首页访问路径
shiro:
defaultPath: ${vuePath}/login
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3、打开前端 .env.tomcat 配置文件，根据需要调整您的参数：
# 访问项目的根路径（固定设置，不建议修改，对应后端的 vue.ctxPath.replaceText 参数一致）
VITE_PUBLIC_PATH = /vuePath
# 打包编译发布路径（建议：直接编译到您的 Java 项目的 resources 下，/vue 对应后端的 vuePath 参数一致）
VITE_OUTPUT_DIR = ../../jeesite/web/src/main/resources/vue
# 访问接口的前缀，在根路径之后（对应后端的 server.servlet.context-path 参数一致）
VITE_GLOB_API_URL_PREFIX = /js
# 访问接口的管理基础路径（对应后端的 adminPath 参数一致）
VITE_GLOB_ADMIN_PATH = /a
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
4、本地执行前端打包命令
npm run build:tomcat
1
6、编译后的资源会自动生成到您指定 VITE_OUTPUT_DIR 目录下
7、可尝试启动后端项目，即可正常访问前端 Vue 页面资源，测试无误后，进行后端 Java 打包即可
8、后端接口服务部署方法：部署到正式服务器
# NPM 脚本
"scripts": {
# 安装依赖
"bootstrap": "pnpm install",
# 运行项目
"dev": "pnpm dev",
# 构建项目
"build": "vite build --mode production",
# 构建项目，部署到 tomcat
"build:tomcat": "vite build --mode tomcat --emptyOutDir",
# 预览打包后的内容（构建并预览）
"preview": "pnpm build && pnpm preview:dist",
# 直接预览本地 dist 文件目录
"preview:dist": "vite preview --mode development --port 3100",
# 类型检查
"type:check": "vue-tsc --noEmit --skipLibCheck",
# 执行 eslint 校验，并修复部分问题
"lint:eslint": "eslint --cache --max-warnings 0 \"./**/*.{ts,tsx,vue}\" --fix",
# 执行 prettier 格式化（该命令会对项目所有代码进行 prettier 格式化）
"lint:prettier": "prettier --write \"./**/*.{vue,tsx,less,scss}\"",
# 执行 stylelint 格式化
"lint:stylelint": "stylelint \"./**/*.{vue,less,scss,css}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
# 生成打包分析，执行完成后需要打开 `./build/.cache/stats.html` 查看报告
"report": "cross-env REPORT=true npm run build",
# 卸载并重新安装依赖
"reinstall": "rimraf pnpm-lock.yaml node_modules && npm run bootstrap",
# 运行项目
"serve": "npm run dev"
},
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
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
# 目录说明
# Monorepo 版
├── bin 常用脚本目录
├── packages 模块包目录
│ ├── assets 资源包
│ │ ├── icons 自定义图标
│ │ ├── images 图片资源
│ │ ├── svg SVG资源
│ │ ├── package.json 模块包配置文件
│ │ └── tsconfig.json 模块包TS配置文件
│ ├── core 核心包模块
│ │ ├── api 数据接口文件
│ │ ├── components 公共组件
│ │ ├── design 样式文件
│ │ ├── directives 指令
│ │ ├── enums 枚举/常量
│ │ ├── hooks hook
│ │ │ ├── component 组件相关hook
│ │ │ ├── core 基础核心hook
│ │ │ ├── event 事件相关hook
│ │ │ ├── setting 配置相关hook
│ │ │ └── web web相关hook
│ │ ├── layouts 布局文件
│ │ │ ├── default 默认布局
│ │ │ ├── iframe iframe布局
│ │ │ ├── page 页面布局
│ │ │ └── views 页面视图
│ │ ├── locales 多语言国际化
│ │ ├── logics 框架逻辑
│ │ ├── router 路由配置
│ │ ├── settings 项目配置
│ │ │ ├── componentSetting.ts 组件配置
│ │ │ ├── designSetting.ts 样式配置
│ │ │ ├── encryptionSetting.ts 加密配置
│ │ │ ├── localeSetting.ts 多语言配置
│ │ │ ├── projectSetting.ts 项目配置
│ │ │ └── siteSetting.ts 站点配置
│ │ ├── store 本地存储
│ │ ├── utils 工具类
│ │ │── views 视图页面
│ │ │ ├── msg 消息模块模块
│ │ │ ├── sys 系统核心模块
│ │ │ └── test 测试功能模块
│ │ ├── index.ts 模块包索引文件
│ │ ├── package.json 模块包配置文件
│ │ └── tsconfig.json 模块包TS配置文件
│ ├── bpm 工作流模块
│ ├── cms 内容管理模块
│ ├── dbm 数据库表模块
│ ├── dfm 动态表单模块
│ ├── filemanager 文件管理模块
│ ├── test 增删改查测试模块
│ ├── tests 前端测试服务
│ ├── types 类型定义模块
│ └── vite 打包构建相关
│ ├── config 配置文件
│ ├── options vite配置项
│ ├── plugins vite插件
│ └── theme 系统主题相关
├── web APP 包（启动 Web 项目）
│ ├── public 公共静态资源目录
│ │ ├── resource 公共资源
│ │ └── favicon.png 网页图标
│ ├── src Web 源码主目录
│ │ ├── App.vue 主 Vue 组件
│ │ └── main.ts 主入口脚本
│ ├── .env 全局属性配置
│ ├── .env.development 开发环境属性配置
│ ├── .env.production 生产环境属性配置
│ ├── .env.tomcat 部署到Tomcat的属性配置
│ ├── index.html 主页面
│ ├── package.json Web 包配置文件
│ ├── tsconfig.ts TypeScript配置文件
│ ├── uno.config.ts UnoCSS配置文件
│ └── vite.config.ts Vite配置文件
├── .npmrc NPM配置文件
├── .prettierignore 代码格式化忽略的文件
├── .prettierrc.mjs 代码格式化配置
├── .stylelintignore 样式格式化忽略的文件
├── eslint.config.mjs 脚本检查格式化配置
├── package.json 项目信息和依赖配置
├── pnpm-lock.json PNPM依赖版本锁定文件
├── pnpm-workspace.json PNPM工程配置文件
├── stylelint.config.mjs 样式格式化配置文件
├── tsconfig.ts TypeScript配置文件
├── turbo.ts Turborepo配置文件
└── uno.config.ts UnoCSS配置文件
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
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
# 非 Monorepo 版
├── bin 常用脚本目录
├── build 打包构建相关
│ ├── config 配置文件
│ ├── options vite配置项
│ ├── plugins vite插件
│ └── theme 系统主题相关
├── public 公共静态资源目录
│ ├── resource 公共资源
│ └── favicon.png 网页图标
├── src 源码主目录
│ ├── api 数据接口文件
│ ├── assets 资源文件
│ │ ├── icons 图标文件夹
│ │ ├── images 图片的文件夹
│ │ └── svg svg图片的文件夹
│ ├── components 公共组件
│ ├── design 样式文件
│ ├── directives 指令
│ ├── enums 枚举/常量
│ ├── hooks hook
│ │ ├── component 组件相关hook
│ │ ├── core 基础核心hook
│ │ ├── event 事件相关hook
│ │ ├── setting 配置相关hook
│ │ └── web web相关hook
│ ├── layouts 布局文件
│ │ ├── default 默认布局
│ │ ├── iframe iframe布局
│ │ └── page 页面布局
│ ├── locales 多语言国际化
│ ├── logics 框架逻辑
│ ├── router 路由配置
│ ├── App.vue 主页面
│ ├── main.ts 主入口
│ ├── settings 项目配置
│ │ ├── componentSetting.ts 组件配置
│ │ ├── designSetting.ts 样式配置
│ │ ├── encryptionSetting.ts 加密配置
│ │ ├── localeSetting.ts 多语言配置
│ │ ├── projectSetting.ts 项目配置
│ │ └── siteSetting.ts 站点配置
│ ├── store 本地存储
│ ├── utils 工具类
│ └── views 视图页面
│ ├── bpm 工作流模块
│ ├── sys 系统核心模块
│ └── test 测试功能模块
├── tests 测试服务器
├── types 类型文件
├── .env 全局属性配置
├── .env.development 开发环境属性配置
├── .env.production 生产环境属性配置
├── .env.tomcat 部署到Tomcat的属性配置
├── .eslintrc 脚本检查格式化配置
├── .prettierrc 代码格式化配置
├── .stylelintrc 样式格式化配置
├── package.json 项目信息和依赖配置
├── tsconfig.ts TypeScript配置文件
├── uno.config.ts UnoCSS配置文件
├── windi.config.ts WindiCSS配置文件(v5.6.1及以前版本)
└── vite.config.ts Vite配置文件
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
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
