vite+vue3使用@路径报错处理

 更新时间:2023年11月20日 09:51:27   作者:云隙阳光i  
本文主要介绍了vite+vue3使用@路径报错处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

报错原因:未配置 @符号为指定路径别名,直接使用导致

处理方法:

安装path模块:

npm install --save-dev @types/node

修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

修改tsconfig.json:

配置 baseUrl、paths

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

最后重新运行项目

到此这篇关于vite+vue3使用@路径报错处理的文章就介绍到这了,更多相关vite vue3 @路径报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法

    使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法

    这篇文章主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue中配置后端接口服务信息详解

    vue中配置后端接口服务信息详解

    这篇文章主要介绍了vue中配置后端接口服务信息详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue实现父子组件传值其实不难

    Vue实现父子组件传值其实不难

    这篇文章主要介绍了Vue实现父子组件传值其实不难问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 使用VUE实现一键复制内容功能

    使用VUE实现一键复制内容功能

    这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时,会提示“复制成功”,这样复制的内容就可以在其他地方使用了,感兴趣的朋友可以学习一下
    2023-04-04
  • vue 运用mock数据的示例代码

    vue 运用mock数据的示例代码

    本篇文章主要介绍了vue 运用mock数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 浅谈vue中$event理解和框架中在包含默认值外传参

    浅谈vue中$event理解和框架中在包含默认值外传参

    这篇文章主要介绍了浅谈vue中$event理解和框架中在包含默认值外传参,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue 解决在element中使用$notify在提示信息中换行问题

    Vue 解决在element中使用$notify在提示信息中换行问题

    这篇文章主要介绍了Vue 解决在element中使用$notify在提示信息中换行问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vuex的数据渲染与修改浅析

    vuex的数据渲染与修改浅析

    这篇文章主要给大家介绍了关于vuex的数据渲染与修改的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue制作抓娃娃机的示例代码

    vue制作抓娃娃机的示例代码

    这篇文章主要介绍了vue制作抓娃娃机,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue中的局部过滤器和全局过滤器代码实操

    vue中的局部过滤器和全局过滤器代码实操

    这篇文章主要分享的是vue中的局部过滤器和全局过滤器代码实操,下面文章主要以代码展现,具有一的的知识参考性,需要的小伙伴可以参考一下
    2022-02-02

最新评论