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