225 lines
4.6 KiB
Markdown
225 lines
4.6 KiB
Markdown
# 路径问题修复说明
|
||
|
||
## 🐛 问题描述
|
||
|
||
错误信息：
|
||
```
|
||
module 'pages/auth/@/utils/wechat.js' is not defined,
|
||
require args is '@/utils/wechat.js'
|
||
```
|
||
|
||
## 🔍 问题原因
|
||
|
||
在某些编译环境下，`@` 别名（指向 `src` 目录）无法正确解析，导致模块导入失败。
|
||
|
||
## ✅ 解决方案
|
||
|
||
将所有使用 `@` 别名的导入改为相对路径导入。
|
||
|
||
## 📝 修改的文件
|
||
|
||
### 1. `uniapp/src/pages/login/index.vue`
|
||
|
||
**修改前**:
|
||
```javascript
|
||
const wechatModule = require('@/utils/wechat.js')
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
const wechatModule = require('../../utils/wechat.js')
|
||
```
|
||
|
||
**路径说明**:
|
||
- 当前文件: `src/pages/login/index.vue`
|
||
- 目标文件: `src/utils/wechat.js`
|
||
- 相对路径: `../../utils/wechat.js` (向上两级到 src，然后进入 utils)
|
||
|
||
---
|
||
|
||
### 2. `uniapp/src/pages/auth/parent-register.vue`
|
||
|
||
**修改前**:
|
||
```javascript
|
||
const wechatModule = require('@/utils/wechat.js')
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
const wechatModule = require('../../utils/wechat.js')
|
||
```
|
||
|
||
**路径说明**:
|
||
- 当前文件: `src/pages/auth/parent-register.vue`
|
||
- 目标文件: `src/utils/wechat.js`
|
||
- 相对路径: `../../utils/wechat.js` (向上两级到 src，然后进入 utils)
|
||
|
||
---
|
||
|
||
### 3. `uniapp/src/utils/wechat.js`
|
||
|
||
**修改前**:
|
||
```javascript
|
||
import { authApi } from '@/api/index.js'
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
import { authApi } from '../api/index.js'
|
||
```
|
||
|
||
**路径说明**:
|
||
- 当前文件: `src/utils/wechat.js`
|
||
- 目标文件: `src/api/index.js`
|
||
- 相对路径: `../api/index.js` (向上一级到 src，然后进入 api)
|
||
|
||
---
|
||
|
||
### 4. `uniapp/src/api/index.js`
|
||
|
||
**修改前**:
|
||
```javascript
|
||
import request from '@/utils/request.js'
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
import request from '../utils/request.js'
|
||
```
|
||
|
||
**路径说明**:
|
||
- 当前文件: `src/api/index.js`
|
||
- 目标文件: `src/utils/request.js`
|
||
- 相对路径: `../utils/request.js` (向上一级到 src，然后进入 utils)
|
||
|
||
---
|
||
|
||
### 5. `uniapp/utils/wechat.js`
|
||
|
||
**操作**: 重新复制更新后的文件
|
||
```bash
|
||
复制 src/utils/wechat.js → utils/wechat.js
|
||
```
|
||
|
||
## 📂 目录结构说明
|
||
|
||
```
|
||
uniapp/
|
||
├── src/
|
||
│ ├── pages/
|
||
│ │ ├── login/
|
||
│ │ │ └── index.vue ← 需要导入 wechat.js
|
||
│ │ └── auth/
|
||
│ │ └── parent-register.vue ← 需要导入 wechat.js
|
||
│ ├── utils/
|
||
│ │ ├── wechat.js ← 被导入的文件
|
||
│ │ └── request.js
|
||
│ └── api/
|
||
│ └── index.js
|
||
└── utils/
|
||
└── wechat.js ← 备份文件
|
||
```
|
||
|
||
## 🔄 相对路径计算方法
|
||
|
||
### 从 `pages/login/index.vue` 到 `utils/wechat.js`
|
||
|
||
```
|
||
pages/login/index.vue
|
||
↓ ../ (向上到 pages)
|
||
pages/
|
||
↓ ../ (向上到 src)
|
||
src/
|
||
↓ utils/ (进入 utils)
|
||
src/utils/
|
||
↓ wechat.js (目标文件)
|
||
src/utils/wechat.js
|
||
|
||
结果: ../../utils/wechat.js
|
||
```
|
||
|
||
### 从 `utils/wechat.js` 到 `api/index.js`
|
||
|
||
```
|
||
utils/wechat.js
|
||
↓ ../ (向上到 src)
|
||
src/
|
||
↓ api/ (进入 api)
|
||
src/api/
|
||
↓ index.js (目标文件)
|
||
src/api/index.js
|
||
|
||
结果: ../api/index.js
|
||
```
|
||
|
||
## ✅ 验证步骤
|
||
|
||
1. **清除缓存**
|
||
- 在微信开发者工具中点击"清除缓存"
|
||
- 或删除项目的 `node_modules/.cache` 目录
|
||
|
||
2. **重新编译**
|
||
- 点击"编译"按钮
|
||
- 或使用快捷键重新编译
|
||
|
||
3. **测试登录**
|
||
- 进入登录页面
|
||
- 点击"一键登录"按钮
|
||
- 查看控制台日志
|
||
|
||
## 📊 预期结果
|
||
|
||
### 成功的日志输出
|
||
|
||
```
|
||
[Login] 开始微信登录...
|
||
[Login] 尝试导入 wechat 模块...
|
||
[Login] wechat 模块: [Object object]
|
||
[Login] wechat 实例: WechatLogin {...}
|
||
[Login] 调用 quickLogin...
|
||
[WeChat] 开始一键登录...
|
||
[WeChat] 获取code成功: wx_code_xxxxx
|
||
```
|
||
|
||
### 如果仍然报错
|
||
|
||
请检查：
|
||
1. 文件路径是否正确
|
||
2. 文件是否存在
|
||
3. 是否已清除缓存
|
||
4. 是否已重新编译
|
||
|
||
## 🎯 为什么使用相对路径
|
||
|
||
### 优点
|
||
- ✅ 兼容性好，所有环境都支持
|
||
- ✅ 不依赖构建工具配置
|
||
- ✅ 路径明确，易于理解
|
||
|
||
### 缺点
|
||
- ⚠️ 路径较长
|
||
- ⚠️ 文件移动时需要更新路径
|
||
|
||
### 何时使用 `@` 别名
|
||
- 在 Vue 组件的 `<script>` 标签中使用 `import`
|
||
- 在 Webpack/Vite 等构建工具配置正确的情况下
|
||
|
||
### 何时使用相对路径
|
||
- 在使用 `require()` 动态导入时
|
||
- 在某些编译环境不支持别名时
|
||
- 在需要最大兼容性时
|
||
|
||
## 📝 总结
|
||
|
||
本次修复将所有 `@` 别名改为相对路径，确保在所有环境下都能正确导入模块。
|
||
|
||
**修改文件数**: 4个
|
||
**修改类型**: 路径修改
|
||
**影响范围**: 模块导入
|
||
**兼容性**: ✅ 提升
|
||
|
||
---
|
||
|
||
**修复时间**: 2026-02-03
|
||
**状态**: ✅ 已完成
|