vite+vue3.2项目中使用@路径报错问题及解决

 更新时间:2025年12月04日 10:38:58   作者:羅森林  
文章介绍了解决Vite项目中报错“未配置@符号为指定路径别名”的方法,通过修改vite.config.ts和tsconfig.json文件,配置baseUrl和paths,解决了路径别名未正确解析的问题

错误截图

报错原因

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

处理方法

安装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" }]
}

重新运行项目

npm run dev

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3引入highlight.js进行代码高亮的方法实例

    vue3引入highlight.js进行代码高亮的方法实例

    最近忙着开发自己的开发脚手架,在做代码生成器的时候,有个预览功能,需要让代码高亮,下面这篇文章主要给大家介绍了关于vue3引入highlight.js进行代码高亮的相关资料,需要的朋友可以参考下
    2022-04-04
  • 如何利用 vue实现鼠标悬停时显示元素或文本

    如何利用 vue实现鼠标悬停时显示元素或文本

    Vue.js 是一种流行的 JavaScript 框架,可以使 Web 应用程序的开发变得更加轻松和高效,这篇文章主要介绍了在 vue 中鼠标悬停时显示元素或文本,需要的朋友可以参考下
    2023-05-05
  • 浅谈在vue项目中如何定义全局变量和全局函数

    浅谈在vue项目中如何定义全局变量和全局函数

    本篇文章主要介绍了浅谈在vue项目中如何定义全局变量和全局函数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue实战中的一些实用小魔法汇总

    vue实战中的一些实用小魔法汇总

    这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
    2021-06-06
  • Vue 组件(component)教程之实现精美的日历方法示例

    Vue 组件(component)教程之实现精美的日历方法示例

    组件是我们学习vue必须会的一部分,下面这篇文章主要给大家介绍了关于Vue 组件(component)教程之实现精美的日历的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • Vue.use()的用法和install的用法解析

    Vue.use()的用法和install的用法解析

    这篇文章主要介绍了Vue.use()的用法和install的用法解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 基于Vue3和SpringBoot实现Web实时消息推送功能

    基于Vue3和SpringBoot实现Web实时消息推送功能

    这篇文章主要介绍了WebSocket实现实时通信,对比HTTP低效,通过SpringBoot+Vue整合实现消息推送,涵盖聊天、股票等场景,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2025-05-05
  • vue-cli3项目升级到vue-cli4 的方法总结

    vue-cli3项目升级到vue-cli4 的方法总结

    这篇文章主要介绍了vue-cli3项目升级到vue-cli4 的方法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue监听器简单使用及注意事项说明

    Vue监听器简单使用及注意事项说明

    这篇文章主要介绍了Vue监听器简单使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue对话框组件使用方法详解

    Vue对话框组件使用方法详解

    这篇文章主要为大家详细介绍了Vue对话框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论