“我正在参加「掘金·启航计划」”

1 npm i vue-router报错

An unexpected error occurred: "EPERM: operation not permitted, unlink 'D:\

• 问题：网上查阅资料发现是因为服务正在启动，必须断开进程才能继续安装依赖
• 解决：停止项目，成功安装依赖

友情建议：在vue3项目中尽量使用高版本的node

2 element-plus按需安装报错

问题：我按照官网安装element-plus之后报错,提示文件不存在，暂未找到原因

[vite] Internal server error: Failed to resolve import “element-plus/es/components/button/style/css” from “src\views\home\Index.vue”. Does the file exist?

• 解决：重新安装element-plus

npm i element-plus

3 配置路径别名报错

// vite.config文件
import * as path from "path"

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  //配置@符
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '#': path.resolve(__dirname, 'types')
    },
  }
})

问题：导入path提示，找不到模块，因为项目使用的有typeScript，由于path是node里的模块，而nodejs内部不支持ts的处理，因此报错 解决：安装依赖@types/node，不再报错

npm install @types/node --save-dev

4 在vue文件中导入报错

问题：使用@来导入文件时，报错“导入路径不能以 .ts 扩展名结尾。”

• 解决方式一：在src文件夹中新增文件env.d.ts 文件中输入代码，给这句话进行了类型增强，使ts能够识别(不推荐，这样做的话，以后再出现同样问题还是要在文件中把相应代码进行类型增强)

declare module '@/api/login.ts';

env.d.ts文件生效的原理，是因为在tsconfig.json文件中声明了:

"include": ["src//*.ts", "src//.d.ts", "src/**/.tsx", "src/**/*.vue"],

这行json代码指定了需要编译处理的文件列表，因此在本地创建 .d.ts文件时，需要注意文件的存放路径是否符合include声明的要求，否则是不会被编译处理的。

• 解决方式二:

第一步： 由于在vue3中默认导出需要加后缀名（vue2并不需要），我们可以在vite.config文件中配置以ts结尾的文件可以不写后缀名

export default defineConfig({
  //配置@符
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '#': path.resolve(__dirname, 'types')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] //配置文件中以数组中元素结尾的文件可以不写后缀名
  }
})

第二步： 需要在tsconfig.json文件中配置地址

  "compilerOptions": {
    // 配置默认地址及‘@’别名
    "baseUrl": "./",
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }
  },

然后我们在导入文件的时候，可以不写后缀名.ts

import { loginApi } from "@/api/login";

5 ！！！小坑，路由实例挂载

在main.ts文件中w挂载路由时，路由要挂载在app实例之前，否则无法通过编译，页面崩溃

const app = createApp(App1)
app.use(router)
app.mount('#app')