vue3使用別名報錯問題的解決辦法(vetur插件報錯問題)
更新時間：2022年07月15日 15:58:56 作者：誰扔的炮仗啊
最近在寫一個購物網(wǎng)站使用vue,使用中遇到了問題,下面這篇文章主要給大家介紹了關(guān)于vue3使用別名報錯問題的解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
解決vue3使用別名報錯問題：
在vue-cli3以上，創(chuàng)建vue3工程以及使用typescript中，會自動配置好別名。
見于項目根路徑下的 tsconfig.json
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
]
首先是您的路徑正確的問題下，如果使用了 vetur 插件，一直報別名路徑找不到的問題
因此可以直接在 vetur 插件的配置中修改配置
打開設(shè)置，找到 vetur 插件
找到 setting.json 配置
在 setting.json 中加上 “vetur.validation.script”: false
即可解決 vetur 報錯問題
在這個項目中并不需要添加 vue.config.js 文件
附：vue中的別名設(shè)置
對于3.0+的Vue，新建vue.config.js。
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#': resolve('src'),
}
}
},
}
在我們的路由文件中，就可以寫成
import Login from '#/views/Login.vue'
再例如我們把src/views目錄的別名設(shè)置為views
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#': resolve('src'),
'views':resolve('src/views'),
}
}
},
}
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from 'views/Login.vue'
備注：自建的vue.config.js和默認配置合并成最終的配置。
總結(jié)
到此這篇關(guān)于vue3使用別名報錯問題解決的文章就介紹到這了,更多相關(guān)vue3使用別名報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue parseHTML函數(shù)源碼解析 AST預(yù)備知識
這篇文章主要為大家介紹了vue parseHTML函數(shù)源碼解析 AST預(yù)備知識示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue.js每天必學(xué)之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下2016-09-09
今天小編就為大家分享一篇在vue中使用v-bind:class的選項卡方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Vue緩存方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家介紹了vue-router鉤子執(zhí)行順序示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用，所以組件間的相互通信是非常重要的，這篇文章主要介紹了vue中組件間通信的6種方式,需要的朋友可以參考下2022-11-11
詳解Vue、element-ui、axios實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要介紹了Vue、element-ui、axios實現(xiàn)省市區(qū)三級聯(lián)動，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
最近有項目需要用到對圖片進行局部放大,類似淘寶商品頁的放大鏡效果,經(jīng)過一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對比(實例PK )
這篇文章主要介紹了Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對比(實例PK ),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Vue.js?是一個用于構(gòu)建用戶界面的漸進式?JavaScript?框架,它提供了多種方法來實現(xiàn)頁面之間的導(dǎo)航,本文將詳細介紹?Vue?3?中的各種頁面跳轉(zhuǎn)方式,有需要的小伙伴可以參考一下2024-12-12