JeeSite Vue 快速开始、安装部署、编译打包
# 相关链接
- VSCode (opens new window) 或 WebStorm (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 插件
- Volar (opens new window) - Vue3 开发必备（Vetur禁用）
- ESLint (opens new window) - 脚本代码检查
- Prettier (opens new window) - 代码格式化
- Stylelint (opens new window) - CSS 格式化
- DotENV (opens new window) - .env 文件高亮
- I18n-ally (opens new window) - 国际化 i18n 插件
- Iconify IntelliSense (opens new window) - Iconify 图标插件
- Windicss IntelliSense (opens new window) - WindiCSS 提示插件
# 安装初始化
1、如果没有安装 Node.js 18+，下载地址：https://nodejs.org (opens new window)
# 验证
node -v
1
2
2
提示：如果期望保留多个 node 版本，推荐使用 nvm (opens new window) 进行版本切换
2、如果没有安装 Yarn 执行安装（要求 Yarn v1.x）
npm i -g yarn
# 验证
yarn -v
1
2
3
2
3
提示：如果想用 pnpm 也行，将 yarn 替换为 pnpm 即可。
3、获取源代码
git clone https://gitee.com/thinkgem/jeesite-vue.git
cd jeesite-vue
1
2
2
注意：不要放到中文或带空格的目录下。
4、安装依赖
yarn config set registry https://registry.npmmirror.com
yarn install
1
2
2
# 配置后端接口
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、运行方式1：开发环境（会加载文件较多，便于调试，请耐心等待，请开启浏览器缓存）
yarn serve
1
2、运行方式2：生产预览（会编译打包整合文件，所以访问性能会大大提高，生产环境可以开启 gzip）
yarn 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、执行打包命令
yarn 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
路由 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": "yarn install",
# 运行项目
"serve": "npm run dev",
# 运行项目
"dev": "vite",
# 构建项目
"build": "vite build --mode production",
# 构建并预览
"build:preview": "npm run build && npm run preview:dist",
# 清空缓存后构建项目
"build:no-cache": "yarn clean:cache && npm run build",
# 类型检查
"type:check": "vue-tsc --noEmit --skipLibCheck",
# 生成打包分析，在 `Mac OS` 电脑上执行完成后会自动打开界面，在 `Window` 电脑上执行完成后需要打开 `./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 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
# 执行 prettier 格式化（该命令会对项目所有代码进行 prettier 格式化，请谨慎执行）
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
# 执行 stylelint 格式化
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
# 卸载安装依赖
"uninstall": "rimraf yarn.lock pnpm-lock.yaml package-lock.json node_modules",
# 更新依赖版本
"update": "yarn global add npm-check-updates && ncu -u",
# 生成图标集
"gen:icon": "esno ./build/generate/icon/index.ts"
},
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
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
# 目录说明
├── build 打包脚本相关
│ ├── config 配置文件
│ ├── generate 样式生成器
│ ├── script 编译脚本
│ └── vite vite配置
├── mock mock文件夹
├── 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 逻辑
│ ├── App.vue 主页面
│ ├── main.ts 主入口
│ ├── router 路由配置
│ ├── settings 项目配置
│ │ ├── componentSetting.ts 组件配置
│ │ ├── designSetting.ts 样式配置
│ │ ├── encryptionSetting.ts 加密配置
│ │ ├── localeSetting.ts 多语言配置
│ │ ├── projectSetting.ts 项目配置
│ │ └── siteSetting.ts 站点配置
│ ├── store 本地存储
│ ├── utils 工具类
│ └── views 视图页面
│ ├── bpm 工作流模块
│ ├── sys 系统核心模块
│ └── test 测试功能模块
├── test 测试
│ └── server 测试用到的服务
│ ├── api 测试服务器
│ ├── upload 测试上传服务器
│ └── websocket 测试ws服务器
├── types 类型文件
├── .env 全局属性配置
├── .env.development 开发环境属性配置
├── .env.production 开发环境属性配置
├── package.json 项目信息和依赖配置
├── vite.config.ts vite配置文件
└── windi.config.ts windcss配置文件
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
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
