feat: 修复模板运行异常问题
This commit is contained in:
duanshuwen
89
README.md
89
README.md
@@ -1,45 +1,100 @@
|
||||
# 智念移动端单页应用Vue3模板
|
||||
# 智念移动端单页应用 Vue3 模板
|
||||
|
||||
# 安装依赖
|
||||
## 项目简介
|
||||
智念移动端单页应用（SPA）Vue3 模板，基于 Vite 构建，集成了 Vant 4 移动端 UI 组件库、Vue Router 4 以及自定义状态管理方案。该模板内置了移动端自适应、数据加密通信、自动化按需引入等核心功能，提供开箱即用的移动端 H5 开发体验。
|
||||
|
||||
Yarn 安装
|
||||
## 核心技术栈
|
||||
- **框架**: [Vue 3](https://v3.vuejs.org/) (Composition API)
|
||||
- **构建工具**: [Vite](https://vitejs.dev/) (v3)
|
||||
- **路由**: [Vue Router](https://next.router.vuejs.org/) (v4)
|
||||
- **UI 组件库**: [Vant](https://vant-contrib.gitee.io/vant/v4/) (v4)
|
||||
- **网络请求**: [Axios](https://axios-http.com/) (自定义封装，支持 RSA/AES 加解密及验签机制)
|
||||
- **CSS 预处理器**: SCSS + PostCSS
|
||||
- **代码规范**: ESLint + Prettier + Husky + Commitlint
|
||||
|
||||
## 目录结构
|
||||
```text
|
||||
webapp-vue-frontend
|
||||
├── public/ # 静态资源，不经过构建打包
|
||||
├── src/
|
||||
│ ├── assets/ # 静态资源 (SCSS 样式、字体等)
|
||||
│ ├── common/ # 公共 JS 方法 (自适应 flexible、网络请求 ajax 等)
|
||||
│ ├── components/ # 全局公共组件
|
||||
│ ├── hooks/ # Vue3 Composition API hooks
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── store/ # 状态管理中心 (基于 Vue3 reactive 自定义实现)
|
||||
│ ├── views/ # 页面视图组件
|
||||
│ ├── App.vue # 根组件
|
||||
│ └── main.js # 项目入口文件
|
||||
├── .env.* # 多环境变量配置文件 (development/staging/production)
|
||||
├── vite.config.js # Vite 构建配置文件
|
||||
└── package.json # 项目依赖与命令脚本
|
||||
```
|
||||
|
||||
## 核心特性
|
||||
1. **移动端自适应**: 采用 `lib-flexible` 结合 `postcss-pxtorem` 实现自动将 `px` 转换为 `rem`，智能适配不同移动设备屏幕尺寸。
|
||||
2. **自动化导入**:
|
||||
- 借助 `unplugin-vue-components` 自动按需引入 Vant 组件，有效减少打包体积。
|
||||
- 借助 `unplugin-auto-import` 自动引入 `vue` 和 `vue-router` 等核心 API，无需在组件内手动 `import`。
|
||||
3. **数据加密通信**: 在 `src/common/ajax.js` 中对 Axios 进行了深度封装，支持基于 RSA 与 AES 的参数加解密，并内置签名 (Sign) 生成算法，保障前后端数据传输安全。
|
||||
4. **移动端调试**: 在开发或测试环境通过 `vite-plugin-vconsole` 注入 `vConsole` 面板，方便在移动端真机进行调试。
|
||||
5. **代码规范检查**: 结合 `Husky` + `Commitlint` 在代码提交前对 Git Commit Message 进行规范校验，同时集成 ESLint & Prettier 进行代码格式化。
|
||||
6. **兼容性处理**: 引入 `@vitejs/plugin-legacy` 以兼容传统浏览器不支持 ESM 的情况。
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1. 安装依赖
|
||||
|
||||
推荐使用 `yarn`：
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
npm 安装
|
||||
|
||||
或者使用 `npm`：
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
# 运行开发
|
||||
### 2. 本地开发运行
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
|
||||
```bash
|
||||
# 或
|
||||
npm run dev
|
||||
```
|
||||
|
||||
# 测试打包
|
||||
### 3. 测试环境打包
|
||||
|
||||
```bash
|
||||
yarn build:stage
|
||||
# 或
|
||||
npm run build:stage
|
||||
```
|
||||
|
||||
```bash
|
||||
npm build:stage
|
||||
```
|
||||
|
||||
# 生产打包
|
||||
### 4. 生产环境打包
|
||||
|
||||
```bash
|
||||
yarn build:prod
|
||||
# 或
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
### 5. 代码检查与修复
|
||||
|
||||
```bash
|
||||
npm build:prod
|
||||
# 检查
|
||||
yarn lint
|
||||
|
||||
# 检查并自动修复
|
||||
yarn lint:fix
|
||||
```
|
||||
|
||||
## 环境变量说明
|
||||
- `.env.development`: 本地开发环境变量配置。
|
||||
- `.env.staging`: 测试/预发布环境变量配置。
|
||||
- `.env.production`: 生产环境变量配置。
|
||||
|
||||
*部分核心变量（根据各环境配置）*:
|
||||
- `VITE_ENV`: 当前环境标识 (development/staging/production)
|
||||
- `VITE_CONSOLE`: vConsole 调试面板开关 (1 开启, 0 关闭)
|
||||
- `VITE_ENCRYPTION`: 接口请求参数是否开启加密的开关控制
|
||||
- `VITE_BASE_API`: 后端接口基础路径
|
||||
|
||||
@@ -13,8 +13,8 @@ const KeepAliveList = ref([])
|
||||
router.beforeEach((to, from, next) => {
|
||||
const keepAlive = to?.meta?.keepAlive
|
||||
|
||||
if (!router.hasRoute(to.name)) {
|
||||
router.push('/error')
|
||||
if (!to.matched.length) {
|
||||
next('/home')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import './normalize';
|
||||
@use './normalize';
|
||||
|
||||
*,
|
||||
*::before,
|
||||
@@ -11,7 +11,6 @@
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
|
||||
&,
|
||||
* {
|
||||
color-scheme: dark !important;
|
||||
@@ -20,7 +19,6 @@
|
||||
}
|
||||
|
||||
[data-theme='light'] {
|
||||
|
||||
&,
|
||||
* {
|
||||
color-scheme: light !important;
|
||||
@@ -93,4 +91,4 @@
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<van-button @click="handleClick">跳转记录</van-button>
|
||||
<van-button @click="handleClick">跳转记录11111</van-button>
|
||||
</template>
|
||||
|
||||
<script setup name="home">
|
||||
|
||||
@@ -18,7 +18,7 @@ export default defineConfig(({ mode }) => {
|
||||
const isVconsole = Number(VITE_CONSOLE)
|
||||
|
||||
return {
|
||||
base: isProd ? './' : './', // 是否是生产环境
|
||||
base: isProd ? './' : '/', // 是否是生产环境
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
chunkSizeWarningLimit: 2048,
|
||||
@@ -90,7 +90,7 @@ export default defineConfig(({ mode }) => {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
charset: false,
|
||||
additionalData: '@import "./src/assets/scss/index.scss";'
|
||||
additionalData: '@use "./src/assets/scss/index.scss";'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user