Vite创建Vue3项目识别 ../ 与 @/ 引入路径失效解决方案

Vite创建Vue3项目识别 ../ 与 @/ 引入路径

 

在使用vite脚手架生成项目时,会出现一些引入路径失败的错误

例子:router中用 component引入路径时

引入 ../ 路径失败

• 找不到模块“../views/login/index.vue”或其相应的类型声明

    {
        path: "/login",
        name: "login",
        component: () => import("../views/login/index.vue")
    },

 

此时就是没有声明引入地址的方法

• 解决方法

1. 找到 vite-env.d.ts

2. 复制以下代码进入

//vue类型声明,让TS知道 .vue文件是什么
 declare module "*.vue" {
     import type { DefineComponent } from "vue";
     const component: DefineComponent<{}, {}, any>;
     export default component;
 }

 

引入 @/ 路径失败

• 出现报错: ts类型错误提示找不到模块“path”或其相应的类型声明

• 解决方法

1.安装 npm i @types/node -D

2.配置vite.config.ts

import path from 'path'
​
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      "@":path.resolve(__dirname,'./src')
    }
  }
})

3.配置tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}