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

您可能感兴趣的文章:

Electron+Vue实现截屏功能的两种方式
在Electron环境下,截屏功能相对强大,可以通过desktopCapturer获取应用视频流,实现对整个应用的截屏,而在非Electron环境下,截屏功能受限,只能截取浏览器内容,且存在iframe或base64图片加载问题
2024-10-10
浅谈angular4.0中路由传递参数、获取参数最nice的写法
下面小编就为大家分享一篇浅谈angular4.0中路由传递参数、获取参数最nice的写法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue实现动态圆环百分比进度条
这篇文章主要为大家详细介绍了Vue实现动态圆环百分比进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vite+vue3使用@路径报错处理
本文主要介绍了vite+vue3使用@路径报错处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-11-11
为什么推荐使用JSX开发Vue3
这篇文章主要介绍了为什么推荐使用JSX开发Vue3，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
vue3路由router.push的使用以及问题分析
页面跳转有很多方法,本次使用的是 vue-router,但却在使用 router.push 的时候遇到了点麻烦,所以记录下来,希望可以帮助有需要的人
2023-09-09
详解vue表单——小白速看
大家可以用 v-model 指令在表单控件元素上创建双向数据绑定。这篇文章主要介绍了vue表单详解,需要的朋友可以参考下
2018-04-04
Vue源码分析之虚拟DOM详解
所谓虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有 10 次更新这篇文章主要给大家介绍了关于Vue源码分析之虚拟DOM的相关资料,需要的朋友可以参考下
2021-05-05
Vue Router的懒加载路径的解决方法
这篇文章主要介绍了Vue Router的懒加载路径的解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
媒体查询media不生效的原因及解决
媒体查询@media常见的不生效原因包括格式书写错误,例如and后必须有空格；样式冲突,后面的CSS会覆盖前面的；CSS本身存在问题,比如块元素浮动导致父级元素无高度而背景颜色不显示；漏掉了meta属性中的viewport属性,正确书写和排列CSS代码
2024-10-10