feat: 修复模板运行异常问题

README.md

@@ -1,45 +1,100 @@
 # 智念移动端单页应用 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
+### 4. 生产环境打包
-npm build:stage
-```
-
-# 生产打包
 
 ```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`: 后端接口基础路径

src/App.vue

@@ -13,8 +13,8 @@ const KeepAliveList = ref([])
 router.beforeEach((to, from, next) => {
   const keepAlive = to?.meta?.keepAlive
 
-  if (!router.hasRoute(to.name)) {
+  if (!to.matched.length) {
-    router.push('/error')
+    next('/home')
     return
   }
 

src/assets/scss/index.scss

@@ -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;

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-button @click="handleClick">跳转记录</van-button>
+  <van-button @click="handleClick">跳转记录11111</van-button>
 </template>
 
 <script setup name="home">

vite.config.js

@@ -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";'
         }
       },