在 Vue3 大事件项目中，完成了注册与登录页面的功能完善，过程中既巩固了基础开发流程，也解决了几个典型的前端开发问题，下面就来复盘一下今天的学习内容与踩坑过程。

一、核心学习内容

1. API 接口模块化封装

为了让项目结构更清晰，我将用户相关的接口请求统一封装到了 /src/api/user.js 文件中，采用命名导出的方式管理不同接口：

• 注册接口：userRegisterService，处理用户注册的 POST 请求
• 登录接口：userLoginService，处理用户登录的 POST 请求这种方式的优势在于，后续页面组件中只需要通过解构导入就能调用接口，避免了重复编写请求代码，也方便后续接口地址、参数的统一维护。

import request from '@/utils/request'

// 注册接口
export const userRegisterService = ({ username, password, repassword }) => {
  return request.post('/api/reg', { username, password, repassword })
}

// 登录接口
export const userLoginService = ({ username, password }) => {
  return request.post('/api/login', { username, password })
}

2. ESLint 代码规范配置优化

为了避免 Element Plus 全局组件（如 ElMessage、ElMessageBox）被 ESLint 误报 no-undef 错误，我修改了项目的 ESLint 配置，在 globals 中声明这些全局变量为只读状态，让代码规范检查更贴合项目实际开发场景。

// eslint.config.js
export default defineConfig([
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ElMessage: 'readonly',
        ElMessageBox: 'readonly',
        ElLoading: 'readonly'
      }
    }
  }
])

3. 路由导航与接口调用的联动

在登录逻辑中，通过 Vue Router 实现了登录成功后的页面跳转，同时在路由导航守卫中调用用户信息接口，实现登录状态校验，完成了 “登录 - 校验 - 跳转” 的完整流程闭环。

---

二、遇到的核心问题与解决方案

问题 1：

问题现象

浏览器控制台报错，提示 /src/api/user.js 没有提供名为 userGetInfoService 的导出，同时 Vue Router 导航抛出异常，页面无法正常加载。

问题原因

这是一个典型的模块导入导出不匹配错误：

1. 我在组件中导入了 userGetInfoService，但 /src/api/user.js 文件中只导出了 userRegisterService 和 userLoginService，并没有定义和导出这个接口函数。
2. 由于缺少该导出，JavaScript 模块解析失败，直接导致路由导航时抛出语法错误，页面渲染中断。

解决方案

两种方案二选一，根据项目实际需求选择：

• 方案 A：补充接口导出（推荐）：在 user.js 中添加 userGetInfoService 接口的封装与导出，和其他接口保持统一的命名导出规范。
• 方案 B：修正导入名称：如果是导入时手误写错了函数名，将组件中的导入语句修改为实际存在的导出名称（比如 userLoginService）。

// 补充后的 user.js 接口
// 获取用户信息接口
export const userGetInfoService = () => {
  return request.get('/api/userinfo')
}

---

问题 2：ESLint 误报 Element Plus 全局组件未定义

问题现象

在组件中直接使用 ElMessage.success() 时，ESLint 抛出 'ElMessage' is not defined 的错误提示，虽然不影响代码运行，但会打断开发体验，也不符合代码规范要求。

问题原因

Element Plus 通过全局挂载的方式注册了 ElMessage、ElMessageBox 等组件，这些组件并不是通过 import 导入的，ESLint 无法识别这些全局变量，因此触发了 no-undef 规则的报错。

解决方案

在 eslint.config.js 的 languageOptions.globals 中声明这些全局变量为只读状态，告诉 ESLint 这些是项目中已存在的全局变量，不需要再做未定义检查。

js

languageOptions: {
  globals: {
    ...globals.browser,
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

---

三、今日踩坑总结与小技巧

1. 模块导入导出必须严格匹配：命名导出的函数名必须和导入时的解构名称完全一致，大小写、拼写都不能出错；如果使用 export default 导出，导入时就不能用解构语法。
2. 接口请求一定要加 return：之前写接口时不小心漏了 return，导致组件中 await 调用时拿不到接口返回的 Promise，后续处理响应数据时一直报错，加上 return 后问题立刻解决。
3. 开发中遇到报错，先看控制台的完整信息：比如这次的报错明确指出了 “模块未提供指定导出”，直接定位到了 user.js 文件，比盲目排查效率高很多。