vscode中Vue別名路徑提示的實(shí)現(xiàn)
開發(fā)場(chǎng)景
當(dāng)使用 Vue 框架進(jìn)行項(xiàng)目開發(fā)時(shí)，在 vue.config.js 中配置好了路徑別名后，到其他頁(yè)面引入組件、引入 css 、引入靜態(tài)文件路徑時(shí)，使用路徑別名不會(huì)智能提示路徑。雖然在 vscode 中安裝了Path Intellisense 插件，但是并無(wú)作用。這樣容易出現(xiàn)路徑拼寫錯(cuò)誤的低能問(wèn)題，同時(shí)也會(huì)造成開發(fā)效率降低
解決方案
在項(xiàng)目 package.json 所在同級(jí)目錄下創(chuàng)建文件 jsconfig.json， 來(lái)解決別名路徑不提示的問(wèn)題。（配置完保存文件后需要重啟編輯器才能生效。而且它只能識(shí)別 .vue 和 .js結(jié)尾的文件，css文件與其他的靜態(tài)文件依然沒(méi)有提示， 不推薦?。。。?br />
// .jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/\*": \['src/\*'\],
"a/\*": \["src/assets/\*"\],
"c/\*": \["src/components/\*"\],
...
}
},
"include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\],
"exclude": \["node\_modules"\]
}
在 vscode 的 setting.json 中給 Path Intellisence 配置（該方案是最優(yōu)選，能識(shí)別任意格式文件，覆蓋率最廣。當(dāng)別名發(fā)生改變時(shí)只需修改配置即可）
// setting.json
"path-intellisense.mappings": {
"a": "${workspaceRoot}/src",
"c": "${workspaceRoot}/src/components",
...
}
其他網(wǎng)友解決方法
項(xiàng)目中webpack.base.conf.js配置自定義別名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles')
}
},
在項(xiàng)目根目錄下創(chuàng)建jsconfig.json文件，配置如下：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
// 配置自定義的別名匹配路徑
"styles/*": [
"src/assets/styles/*"
]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}
到此這篇關(guān)于vscode中Vue別名路徑提示的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vscode Vue別名路徑提示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 路由切換時(shí)頁(yè)面內(nèi)容沒(méi)有重新加載的解決方法
今天小編就為大家分享一篇Vue 路由切換時(shí)頁(yè)面內(nèi)容沒(méi)有重新加載的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Vite中,我們可以使用環(huán)境變量來(lái)管理不同環(huán)境下的配置,本文主要介紹了vite環(huán)境變量.env文件的配置及使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
本篇文章主要介紹了通過(guò)命令行生成vue項(xiàng)目框架的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要給大家介紹了關(guān)于vue3父組件調(diào)用子組件的方法例子,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Python合成Excel表的實(shí)現(xiàn)代碼（多sheet）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽的公用組件功能
小編接到查看影像的功能需求，根據(jù)需求，多個(gè)組件需要用到查看影像的功能，所以考慮做一個(gè)公用組件，通過(guò)組件傳值的方法將查看影像文件的入?yún)鬟^(guò)去。下面小編通過(guò)實(shí)例代碼給大家分享vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽的公用組件功能，需要的朋友參考下吧2018-10-10
Vue中實(shí)現(xiàn)父子組件雙向數(shù)據(jù)流的三種方案分享
通常情況下,父子組件的通信都是單向的,或父組件使用props向子組件傳遞數(shù)據(jù),或子組件使用emit函數(shù)向父組件傳遞數(shù)據(jù),本文將嘗試講解Vue中常用的幾種雙向數(shù)據(jù)流的使用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue過(guò)濾器用法,結(jié)合實(shí)例形式總結(jié)分析了vue.js常見(jiàn)過(guò)濾器相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
這篇文章主要給大家介紹了關(guān)于Element-UI中el-table如何合并相同單元格的相關(guān)資料,el-table的組件的可以合并單元格,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08