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 @路径报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3中watch的最佳用法

    Vue3中watch的最佳用法

    这篇文章主要给大家介绍了关于Vue3中watch用法的相关资料,文章中有详细的代码示例,需要的朋友可以参考下
    2023-04-04
  • vue如何查找数组中符合条件的对象

    vue如何查找数组中符合条件的对象

    这篇文章主要介绍了vue如何查找数组中符合条件的对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue用vis插件如何实现网络拓扑图

    vue用vis插件如何实现网络拓扑图

    这篇文章主要介绍了vue用vis插件如何实现网络拓扑图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue+Openlayers自定义轨迹动画

    Vue+Openlayers自定义轨迹动画

    这篇文章主要为大家详细介绍了Vue+Openlayers自定义轨迹动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Vue中$set()的使用方法场景分析

    Vue中$set()的使用方法场景分析

    由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()对属性遍历添加 getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的,这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下
    2023-02-02
  • Vue2.0用户权限控制解决方案的示例

    Vue2.0用户权限控制解决方案的示例

    本篇文章主要介绍了Vue2.0用户权限控制解决方案的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue实现表单验证功能

    vue实现表单验证功能

    这篇文章主要为大家详细介绍了vue实现表单验证功能,基于NUXT的validate方法实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 关于vue中hash和history的区别与使用图文详解

    关于vue中hash和history的区别与使用图文详解

    vue-router中有hash模式和history模式,下面这篇文章主要给大家介绍了关于vue中hash和history的区别与使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 详解vue axios二次封装

    详解vue axios二次封装

    这篇文章给大家分享了vue axios二次封装的相关知识点等内容以及实例代码,有兴趣的朋友可以参考学习下。
    2018-07-07
  • Vue SSR 即时编译技术的实现

    Vue SSR 即时编译技术的实现

    这篇文章主要介绍了Vue SSR 即时编译技术的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论