JeeSite Vue 快速开始、安装部署、编译打包
# 相关链接
- VSCode (opens new window) 或 WebStorm (opens new window) 或 IDEA (opens new window)- IDE 集成开发工具
- Node.js 18 (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 18+，下载地址：https://nodejs.org (opens new window)
# 验证
node -v
# 配置国内源
npm config set registry https://registry.npmmirror.com
1
2
3
4
2
3
4
提示
如果期望保留多个 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、打开 .env.production 文件，修改参数：
# 访问项目的根路径
VITE_PUBLIC_PATH = /
# 访问接口的根路径
VITE_GLOB_API_URL =
# 访问接口的前缀，在根路径之后
VITE_GLOB_API_URL_PREFIX = /js
# 路由模式（true: history、false: hash）
VITE_ROUTE_WEB_HISTORY = true
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2、执行打包命令
npm run build
1
打包完成后，会在根目录生成 dist 文件夹，发布 nginx。
打包后支持动态配置：
打开 _app.config.js 文件，用于项目在打包后，需要动态修改配置的需求，如接口地址。不用重新进行打包，可在打包后修改 /dist/_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: '/js',
VITE_GLOB_API_URL_PREFIX: '',
VITE_GLOB_UPLOAD_URL: '/upload',
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
系统默认开启了百度统计，可在 _app.config.js 中删除 var _hmt 后的代码，即关闭统计。
路由 history 模式：
路由如果采用 history 模式 (opens new window)，您还需要辅助配置 nginx 如下：
nginx.conf 文件
server {
# 前端Vue页面
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;
#}
# 后端接口服务
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
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
# NPM 脚本
"scripts": {
# 安装依赖
"bootstrap": "pnpm install",
# 运行项目
"serve": "npm run dev",
# 运行项目
"dev": "vite",
# 构建项目
"build": "vite build --mode production",
# 构建并预览
"build:preview": "npm run build && npm run preview:dist",
# 类型检查
"type:check": "vue-tsc --noEmit --skipLibCheck",
# 生成打包分析，执行完成后需要打开 `./build/.cache/stats.html` 查看报告
"report": "cross-env REPORT=true npm run build",
# 预览打包后的内容（先打包在进行预览）
"preview": "npm run build && npm run preview:dist",
# 直接预览本地 dist 文件目录
"preview:dist": "vite preview --mode development --port 3100",
# 删除缓存
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
# 执行 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/",
# 卸载安装依赖
"uninstall": "rimraf yarn.lock pnpm-lock.yaml package-lock.json node_modules",
# 更新依赖版本
"update": "npm install -g npm-check-updates && ncu -u"
},
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
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
# 目录说明
├── build 打包构建相关
│ ├── config 配置文件
│ ├── options vite配置项
│ ├── plugins vite插件
│ └── theme 系统主题相关
├── public 公共静态资源目录
├── 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
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
