vscode中Vue別名路徑提示的實現(xiàn)
開發(fā)場景
當使用 Vue 框架進行項目開發(fā)時，在 vue.config.js 中配置好了路徑別名后，到其他頁面引入組件、引入 css 、引入靜態(tài)文件路徑時，使用路徑別名不會智能提示路徑。雖然在 vscode 中安裝了Path Intellisense 插件，但是并無作用。這樣容易出現(xiàn)路徑拼寫錯誤的低能問題，同時也會造成開發(fā)效率降低
解決方案
在項目 package.json 所在同級目錄下創(chuàng)建文件 jsconfig.json， 來解決別名路徑不提示的問題。（配置完保存文件后需要重啟編輯器才能生效。而且它只能識別 .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)選，能識別任意格式文件，覆蓋率最廣。當別名發(fā)生改變時只需修改配置即可）
// setting.json
"path-intellisense.mappings": {
"a": "${workspaceRoot}/src",
"c": "${workspaceRoot}/src/components",
...
}
其他網(wǎng)友解決方法
項目中webpack.base.conf.js配置自定義別名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles')
}
},
在項目根目錄下創(chuàng)建jsconfig.json文件，配置如下：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
// 配置自定義的別名匹配路徑
"styles/*": [
"src/assets/styles/*"
]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}
到此這篇關于vscode中Vue別名路徑提示的實現(xiàn)的文章就介紹到這了,更多相關vscode Vue別名路徑提示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了VUE搭建手機商城心得和遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
眾所都知vue是一個單頁面應用,下面這篇文章主要給大家介紹了關于vue單頁面改造多頁面應用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
vue-router后臺鑒權(quán)流程實現(xiàn)
本文主要介紹了vue-router后臺鑒權(quán)流程實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue3關于RouterView插槽和過渡動效,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue.js中vue-property-decorator的使用方法詳解
vue-property-decorator是一個用于在Vue.js中使用TypeScript裝飾器的庫,它能夠簡化 Vue 組件的定義,使代碼更加簡潔和可維護,它能夠簡化Vue組件的定義,使代碼更加簡潔和可維護,本文將深入探討vue-property-decorator的使用方法,并展示如何在Vue.js項目中應用它2024-08-08
vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue?ElementUI級聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
后端寫個上傳圖片的接口可不是很簡單，只需要讓這個字段限制為圖片格式，后臺做個保存的邏輯就完事了，前端處理還要牽扯到請求頭，數(shù)據(jù)格式的處理等等問題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯誤，直到我知道了前端的FormData方法！2021-05-05
vue-cli3.0移除了配置文件目錄： config和build文件夾。可以說是非常的精簡了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?這篇文章主要介紹了vue-cli3.0 環(huán)境變量與模式 ,需要的朋友可以參考下2018-11-11
本文主要介紹了vue項目的創(chuàng)建的步驟(圖文教程)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03