初始化
下载源码
# Gitee仓库
// ui 仓库为 ssiot 目录下的 ui 目录
git clone https://gitee.com/sansaniot/ssiot.git
运行环境
node >= 18.13.0
npm >= 8.19.3
补充：点击这里下载Nodejs 安装包。
部署服务
项目提供了编译后的前端工程，可以直接将编译好的文件放到文件服务器进行部署。以下是结合主流nginx服务器在window环境下的部署示例：
目录结构
# 将dist目录中的文件拷贝到nginx的html目录，拷贝完成后nginx中html目录示例
nginx
├─ conf # nginx配置
├─ nginx.exe # nginx核心文件
├─ html # nginx页面目录
│ ├─ assets # dist目录中的assets
│ ├─ images # dist目录中的images
│ ├─ libs # dist目录中的libs
│ ├─ favicon.ico # dist目录中的favicon.ico
│ ├─ index.html # dist目录中的index.html
配置示例
# 增加nginx代理配置（因为是前后端分离，主要用于连接服务器）
//some other...
location / {
root /ssiot/web/sansan;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
//后端服务地址
proxy_pass http://127.0.0.1:9000;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header tenant hd;
}
//some other...
开发调试
# 安装依赖
npm install
# 启动调试
npm run dev
# 编译
npm run build
# eslint 检测代码
npm run lint:eslint
# prettier 格式化代码
npm run lint:prettier
# stylelint 格式化样式
npm run lint:stylelint
忽略本地修改
因为设置了自动导入组件功能，本地开发环境下可以忽略自动生成的文件
# 自动导入
git update-index --assume-unchanged components.d.ts
git update-index --assume-unchanged auto-imports.d.ts
# 开发配置
git update-index --assume-unchanged .env.development
# 合并国际化文件
git update-index --assume-unchanged src/languages/modules/en.ts
git update-index --assume-unchanged src/languages/modules/zh.ts
启动调试
npm run dev http://localhost:8080 默认账号:admin/123456
开发准备
默认配置
- 修改默认配置:
src/config/config.ts
//系统ID，会追加在请求header中（影响菜单权限，对应后台菜单表systemid字段）
export const HEADER_KEY_SYSTEM: string = "systemid";
//系统ID的数据-->systemid:sansan
export const SYSTEM_ID: string = "sansan";
//用户token标识，登录成功后会追加在请求header中
export const HEADER_KEY_TOKEN: string = "Authentication";
// * 高德地图 key
export const MAP_KEY: string = "";
// * 扩展服务密码加密key（有后台统一，用于扩展服务的密码加密，如转发的数据库配置）
export const PASSWORD_KEY: string = "ssiot_aes_len_16";
接口配置
- 修改 API 服务地址:
.env.development
//后台API接口
VITE_API_URL = "http://172.16.22.132:9000";
目录规范
ssiot_ui
├─ .vscode # vscode推荐配置
├─ public # 静态资源文件（忽略打包）
├─ src
│ ├─ api # API接口管理
│ ├─ assets # 静态资源文件
│ ├─ components # 全局组件
│ ├─ config # 全局配置项
│ ├─ directives # 全局指令文件
│ ├─ enums # 项目枚举
│ ├─ hooks # 常用 Hooks
│ ├─ languages # 语言国际化
│ ├─ layouts # 框架布局
│ ├─ routers # 路由管理
│ ├─ stores # pinia store
│ ├─ styles # 全局样式
│ ├─ typings # 全局 ts 声明
│ ├─ utils # 工具库
│ ├─ views # 项目所有页面
│ ├─ App.vue # 入口页面
│ ├─ env.d.ts # ts 识别 vue 文件
│ └─ main.ts # 入口文件
├─ .editorconfig # 编辑器配置（格式化）
├─ .env # vite 常用配置
├─ .env.development # 开发环境配置
├─ .env.production # 生产环境配置
├─ .eslintignore # 忽略 Eslint 校验
├─ .eslintrc.js # Eslint 校验配置
├─ .gitignore # git 提交忽略
├─ .prettierignore # 忽略 prettier 格式化
├─ .prettierrc.js # prettier 配置
├─ .stylelintignore # 忽略 stylelint 格式化
├─ .stylelintrc.js # stylelint 样式格式化配置
├─ commitlint.config.js # git 提交规范配置
├─ index.html # 入口 html
├─ LICENSE # 开源协议文件
├─ lint-staged.config # lint-staged 配置文件
├─ package-lock.json # 依赖包包版本锁
├─ package.json # 依赖包管理
├─ postcss.config.js # postcss 配置
├─ README.md # README 介绍
├─ STANDARD.md # 项目编码规范说明书
├─ tailwind.config.js # tailwind配置文件
├─ tsconfig.json # typescript 全局配置
└─ vite.config.ts # vite 配置
常见编译问题
嵌套 json 取值不支持!和?
问题描述：
drawerProps.rowData!.roleName
drawerProps.rowData?.roleName
解决方案：
禁用VSCode中的Vetur插件。
git commit 提交代码报错
.husky/_/husky.sh: No such file or directory
问题分析：nodejs 版本切换或者相关环境升级导致
解决方案：
1. 删除 node_modules
2. 重新 npm install
husky - commit-msg hook exited with code 1
问题分析：代码提交时，`pre-commit`触发`lint-staged`进行代码风格检查，相关代码不符合
解决方案：
代码提交时描述影响范围与功能。示例: `feat: 增加用户登录校验`
内存溢出
Allocation failed - JavaScript heap out of memory
问题分析：启动调试或者编译内存溢出
解决方案：
1. 全局安装increase-memory-limit
npm install -g increase-memory-limit
2. 进入工程目录，执行：
increase-memory-limit
3. node_modules/.bin 目录搜索 `"%_prog%"` 替换成 `%_prog%` (即去掉双引号)
4. 重新启动运行