最近在学习ts，以前写的都是js，本身也是后端出身，所以尝试一下TS，新开个vue3项目，寒假在写一个React项目

记录一下过程

2024-12-22 编码记录

1. 路由配置问题

问题描述

在配置 Vue Router 时，设置了根路径 / 自动跳转到 /login，但页面并未自动跳转。

解决方法

1. 路由名称重复：

   • 发现 / 和 /hello 路由的 name 都设置为 Home，导致路由系统无法正确识别。
   • 修改 / 路由的 name 为 Root，/hello 路由的 name 为 Hello。

2. 路由顺序问题：

   • 确保 / 路由在路由配置的最前面，避免被其他路由覆盖。

3. 检查 App.vue 中的 <router-view>：

   • 确保在 App.vue 中正确使用了 <router-view>，以便路由组件能够正确渲染。

最终代码

typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Root',
    redirect: '/login',
  },
  {
    path: '/hello',
    name: 'Hello',
    component: () => import('../views/Hello.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  }
];

2. Element Plus 集成问题

问题描述

在 Vue 3 + Vite 项目中集成 Element Plus 时，遇到了样式文件无法加载的问题。

解决方法

1. 安装 Element Plus：

   • 运行以下命令安装 Element Plus：

     bash
     npm install element-plus --save
     

2. 配置按需引入：

   • 使用 vite-plugin-style-import 插件实现按需引入 Element Plus 的样式。
   • 安装插件：

     bash
     npm install vite-plugin-style-import --save-dev
     

   • 在 vite.config.ts 中配置插件：

     typescript
     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import';
     
     export default defineConfig({
       plugins: [
         vue(),
         createStyleImportPlugin({
           resolves: [ElementPlusResolve()],
           libs: [
             {
               libraryName: 'element-plus',
               esModule: true,
               resolveStyle: (name) => {
                 return `element-plus/es/components/${name}/style/css`;
               },
             },
           ],
         }),
       ],
     });
     

3. 检查文件路径：

   • 确保 node_modules/element-plus/es/components/el-button/style/css 文件存在。
   • 如果文件不存在，尝试重新安装 Element Plus。

4. 使用 unplugin-vue-components 插件：

   • 安装插件：

     bash
     npm install unplugin-vue-components --save-dev
     

   • 在 vite.config.ts 中配置插件：

     typescript
     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import Components from 'unplugin-vue-components/vite';
     import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
     
     export default defineConfig({
       plugins: [
         vue(),
         Components({
           resolvers: [ElementPlusResolver()],
         }),
       ],
     });
     

3. Vite 插件依赖问题

问题描述

在配置 vite-plugin-style-import 插件时，遇到了 consola 包未找到的错误。

解决方法

1. 安装 consola：

   • 运行以下命令安装 consola：

     bash
     npm install consola --save-dev
     

2. 重新启动 Vite 开发服务器：

   • 安装完成后，重新启动 Vite 开发服务器：

     bash
     npm run dev
     

4. TypeScript 配置文件缺失问题

问题描述

Vite 在解析项目时尝试读取 tsconfig.node.json 文件，但该文件不存在。

解决方法

1. 创建 tsconfig.node.json 文件：

   • 在项目根目录下创建 tsconfig.node.json 文件，内容如下：

     json
     {
       "compilerOptions": {
         "module": "ESNext",
         "moduleResolution": "Node",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true
       },
       "include": ["vite.config.ts"]
     }
     

2. 检查 tsconfig.json：

   • 如果项目中已有 tsconfig.json，可以将其配置扩展到 tsconfig.node.json：

     json
     {
       "extends": "./tsconfig.json",
       "compilerOptions": {
         "module": "ESNext",
         "moduleResolution": "Node",
         "skipLibCheck": true
       },
       "include": ["vite.config.ts"]
     }