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啦~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
过去在Vue2中,我们采用ref来获取标签的信息,用以替代传统 js 中的 DOM 行为,下面这篇文章主要给大家介绍了关于如何通过一篇文章搞懂Vue3中如何使用ref获取元素节点的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要给大家介绍了关于vue路由教程之静态路由的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要介绍了vue项目登录成功拿到令牌跳转失败401无登录信息的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息
这篇文章主要介绍了vue3使用高德地图,自定义点标记、默认点聚合样式、点击点标记获取信息的相关知识,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-01-01
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-05-05
这篇文章主要介绍了在Vue.js中使用TypeScript的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
Vue+vite创建项目关于vite.config.js文件的配置方法
Vue项目创建时，我们见过vue-cli 创建项目和webpack 创建项目等方式，这篇文章主要介绍了Vue+vite创建项目关于vite.config.js文件的配置方法,需要的朋友可以参考下2023-06-06
一文带你搞懂Vue中Provide/Inject的使用与高级应用
这篇文章将详细介绍如何在 Vue.js 中使用 provide 和 inject 模式,并探讨其在实际应用中的高级用法,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
这篇文章主要介绍了Vue前端对axios的封装和使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
近期学习vue3的父子组件之间的传值,发现跟vue2.x的父子组件之间的传值并没有太大的区别,下面这篇文章主要给大家介绍了关于vue3父组件和子组件如何传值的相关资料,需要的朋友可以参考下2022-08-08
最新评论