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父组件向子组件动态传值的两种方法 ,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了Vue如何循环提取对象数组中的值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程
在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块,这篇文章主要介绍了Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue中data里面的数据相互使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue3为什么这么快,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
Pinia不但支持Vue3，同时还支持Vue2，本文主要介绍了Vue新的状态管理库Pinia入门教程，具有一定的参考价值，感兴趣的可以了解下2022-02-02
本文主要介绍了Vue中代码传送(teleport)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
本文主要介绍了vue实现接口封装的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2024-02-02
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论