vite vue3 路由配置@找不到文件的问题及解决
更新时间：2024年10月09日 14:51:58 作者：摆烂程序鱼
在Vite项目中配置路由时,可能会遇到文件路径错误导致的加载失败问题,常见的解决办法包括安装路径处理插件、正确设置vite.config.js中的路径别名以及重启项目,通过正确配置,可以确保路由正确加载对应的界面文件,避免路径错误导致的问题
问题描述
在vite.config.js文件中配置路由的时候，添加路由界面，找不到指定的文件，提示错误
如图所示：
但是换成 ./ 或者 ../ 就正常了，也没有报错问题
解决办法
1.安装一个path的插件
npm install --save-dev @types/node
2.在vite.config.js中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path"
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": resolve(__dirname, "./src")
}
}
})3.重启项目就ok啦~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何使用Vue生成动态表单,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下2024-03-03
vue2.x,vue3.x使用provide/inject注入的区别说明
这篇文章主要介绍了vue2.x,vue3.x使用provide/inject注入的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue路由之JWT身份认证的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue+element实现输入密码锁屏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤，文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
在Vue.js开发中,经常会遇到需要展示搜索和列表的需求,为了提高代码复用性和开发效率,我们可以封装一个可配置的搜索列表组件,下面我们就来讲讲如何实现这样一个组件吧2023-08-08
这篇文章主要介绍了vue 条件渲染v-if和v-show，在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的，有时候我们想要在一个条件中加载多个html元素，那么我们可以通过template元素上实现，下面就来看看具体实现吧2021-10-10
vue init webpack myproject构建项目 ip不能访问的解决方法
下面小编就为大家分享一篇vue init webpack myproject构建项目 ip不能访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Ant Design moment对象和字符串之间的相互转化教程
这篇文章主要介绍了Ant Design moment对象和字符串之间的相互转化教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在Vue中,有两种类型的自定义指令：局部指令和全局指令,但是除了这些指令 Vue也允许我们自己定义自己的指令,下面我们就来学习一下Vue中自定义指令的用法吧2023-08-08
最新评论