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 插件，但是并無作用。這樣容易出現(xiàn)路徑拼寫錯(cuò)誤的低能問題，同時(shí)也會(huì)造成開發(fā)效率降低
解決方案
在項(xiàng)目 package.json 所在同級(jí)目錄下創(chuàng)建文件 jsconfig.json， 來解決別名路徑不提示的問題。（配置完保存文件后需要重啟編輯器才能生效。而且它只能識(shí)別 .vue 和 .js結(jié)尾的文件，css文件與其他的靜態(tà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搭建手機(jī)商城心得和遇到的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue單頁(yè)面改造多頁(yè)面應(yīng)用的全過程記錄
眾所都知vue是一個(gè)單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue單頁(yè)面改造多頁(yè)面應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue-router后臺(tái)鑒權(quán)流程實(shí)現(xiàn)
本文主要介紹了vue-router后臺(tái)鑒權(quán)流程實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue3關(guān)于RouterView插槽和過渡動(dòng)效
這篇文章主要介紹了vue3關(guān)于RouterView插槽和過渡動(dòng)效,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue.js中vue-property-decorator的使用方法詳解
vue-property-decorator是一個(gè)用于在Vue.js中使用TypeScript裝飾器的庫(kù),它能夠簡(jiǎn)化 Vue 組件的定義,使代碼更加簡(jiǎn)潔和可維護(hù),它能夠簡(jiǎn)化Vue組件的定義,使代碼更加簡(jiǎn)潔和可維護(hù),本文將深入探討vue-property-decorator的使用方法,并展示如何在Vue.js項(xiàng)目中應(yīng)用它2024-08-08
vue依賴包報(bào)錯(cuò)問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報(bào)錯(cuò)問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue?ElementUI級(jí)聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級(jí)聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
后端寫個(gè)上傳圖片的接口可不是很簡(jiǎn)單，只需要讓這個(gè)字段限制為圖片格式，后臺(tái)做個(gè)保存的邏輯就完事了，前端處理還要牽扯到請(qǐng)求頭，數(shù)據(jù)格式的處理等等問題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯(cuò)誤，直到我知道了前端的FormData方法！2021-05-05
vue-cli3.0移除了配置文件目錄： config和build文件夾?？梢哉f是非常的精簡(jiǎn)了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?這篇文章主要介紹了vue-cli3.0 環(huán)境變量與模式 ,需要的朋友可以參考下2018-11-11
vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)
本文主要介紹了vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03