vue3 vite配置@根路径---解决:找不到模块“./xx/xxx.vue”或其相应的类型声明

简介: vue3 vite配置@根路径---解决:找不到模块“./xx/xxx.vue”或其相应的类型声明

在vite.config.js中配置


import { resolve } from "path"
export default defineConfig({
  plugins: [vue()],
  // 配置根路径
  resolve: {
    // ↓路径别名,主要是这部分
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
})

如果在ts中使用可能会报错:

解决方案:npm install --save-dev @types/node


配置根路径后,引入文件可能会报红:vue3+ts报错:找不到模块“@/xxx”或其相应的类型声明。,或者是引入.vue文件的时候报红:vue3+ts报错:找不到模块“./views/login/index.vue”或其相应的类型声明。

出现这种情况的解决方法有两种

第一种:

是在tsconfig.json中修改路径

前面加一个/引入.vue文件后就不会报红。但这种方法并不适合配置了@根路径的情况,配置了根路径,前面加/会报错,所以这边需要去掉斜杠,有意思的是,去掉斜杠,引入.vue文件又不会报错。

在配置paths的时候需要一个基准路径才能配置相对路径,也就是这里的 "baseUrl": "./"

第二种

在根目录下新建env.d.ts,将下面的内容复制进去即可。

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
  }
目录
相关文章
|
5天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
28 0
Vue3 基础语法
|
8天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
14 0
|
9天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
23 3
|
11天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
26 0
|
12天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
32 0
|
12天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 前端开发 C++
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
12 2
|
4天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
14 3
|
4天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
13 1
|
4天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1