vite vue3 路由配置@找不到文件的問題及解決
更新時(shí)間：2024年10月09日 14:51:58 作者：擺爛程序魚
在Vite項(xiàng)目中配置路由時(shí),可能會(huì)遇到文件路徑錯(cuò)誤導(dǎo)致的加載失敗問題,常見的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項(xiàng)目,通過正確配置,可以確保路由正確加載對(duì)應(yīng)的界面文件,避免路徑錯(cuò)誤導(dǎo)致的問題
問題描述
在vite.config.js文件中配置路由的時(shí)候，添加路由界面，找不到指定的文件，提示錯(cuò)誤
如圖所示：
但是換成 ./ 或者 ../ 就正常了，也沒有報(bào)錯(cuò)問題
解決辦法
1.安裝一個(gè)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.重啟項(xiàng)目就ok啦~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)
過去在Vue2中,我們采用ref來獲取標(biāo)簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決
這篇文章主要介紹了vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vue3使用高德地圖,自定義點(diǎn)標(biāo)記、默認(rèn)點(diǎn)聚合樣式、點(diǎn)擊點(diǎn)標(biāo)記獲取信息
這篇文章主要介紹了vue3使用高德地圖,自定義點(diǎn)標(biāo)記、默認(rèn)點(diǎn)聚合樣式、點(diǎn)擊點(diǎn)標(biāo)記獲取信息的相關(guān)知識(shí),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-01-01
基于vue實(shí)現(xiàn)一個(gè)神奇的動(dòng)態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個(gè)簡(jiǎn)易的動(dòng)態(tài)變色功能按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-05-05
這篇文章主要介紹了在Vue.js中使用TypeScript的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置方法
Vue項(xiàng)目創(chuàng)建時(shí)，我們見過vue-cli 創(chuàng)建項(xiàng)目和webpack 創(chuàng)建項(xiàng)目等方式，這篇文章主要介紹了Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置方法,需要的朋友可以參考下2023-06-06
一文帶你搞懂Vue中Provide/Inject的使用與高級(jí)應(yīng)用
這篇文章將詳細(xì)介紹如何在?Vue.js?中使用?provide?和?inject?模式,并探討其在實(shí)際應(yīng)用中的高級(jí)用法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了Vue前端對(duì)axios的封裝和使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下2022-08-08