脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vite+vue3.2使用@路径

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页面query参数变化并重新加载页面数据方式

    vue3页面query参数变化并重新加载页面数据方式

    在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive
    2024-10-10
  • vue如何解决el-select下拉框显示ID不显示label问题

    vue如何解决el-select下拉框显示ID不显示label问题

    这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • vue项目tween方法实现返回顶部的示例代码

    vue项目tween方法实现返回顶部的示例代码

    这篇文章主要介绍了vue项目tween方法实现返回顶部,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 基于Vue3+TypeScript实现图片预览组件

    基于Vue3+TypeScript实现图片预览组件

    在现代的 Web 应用中,图片预览是一个常见的需求,本文将介绍如何使用 Vue3 和 TypeScript 开发一个图片预览组件,支持展示单张或多张图片,并提供了丰富的配置选项,需要的朋友可以参考下
    2024-04-04
  • Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

    Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

    这篇文章主要为大家详细介绍了Vue编写可显示周和月模式的日历，Vue自定义日历内容的显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 构建Vue大型应用的10个最佳实践(小结)

    构建Vue大型应用的10个最佳实践(小结)

    这篇文章主要介绍了构建Vue大型应用的10个最佳实践(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • VUE对接deepseekAPI调用方式

    VUE对接deepseekAPI调用方式

    文章介绍了如何在Vue项目中对接DeepSeek API,包括在开放平台注册账号申请APIKey、安装axios库、创建API调用函数以及在Vue组件中调用该函数
    2025-01-01
  • Vue.js系列之vue-router(上)(3)

    Vue.js系列之vue-router(上)(3)

    这篇文章主要介绍了Vue.js系列之vue-router(上)(3)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-01-01
  • vue el-table 动态添加行与删除行的实现

    vue el-table 动态添加行与删除行的实现

    这篇文章主要介绍了vue el-table 动态添加行与删除行的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • 基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    这篇文章主要给大家介绍了关于如何基于Vue+ELement搭建动态树与数据表格实现分页模糊查询的相关资料,Vue Element UI提供了el-pagination组件来实现表格数据的分页功能,需要的朋友可以参考下
    2023-10-10

最新评论