vscode中Vue別名路徑提示的實現(xiàn)
更新時間：2020年07月31日 09:13:00 作者：Suvin7
這篇文章主要介紹了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 路由切換時頁面內(nèi)容沒有重新加載的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在Vite中,我們可以使用環(huán)境變量來管理不同環(huán)境下的配置,本文主要介紹了vite環(huán)境變量.env文件的配置及使用,具有一定的參考價值,感興趣的可以了解一下2024-06-06
本篇文章主要介紹了通過命令行生成vue項目框架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要給大家介紹了關于vue3父組件調(diào)用子組件的方法例子,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Python合成Excel表的實現(xiàn)代碼（多sheet）,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
小編接到查看影像的功能需求，根據(jù)需求，多個組件需要用到查看影像的功能，所以考慮做一個公用組件，通過組件傳值的方法將查看影像文件的入?yún)鬟^去。下面小編通過實例代碼給大家分享vue項目中實現(xiàn)圖片預覽的公用組件功能，需要的朋友參考下吧2018-10-10
Vue中實現(xiàn)父子組件雙向數(shù)據(jù)流的三種方案分享
通常情況下,父子組件的通信都是單向的,或父組件使用props向子組件傳遞數(shù)據(jù),或子組件使用emit函數(shù)向父組件傳遞數(shù)據(jù),本文將嘗試講解Vue中常用的幾種雙向數(shù)據(jù)流的使用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue過濾器用法,結(jié)合實例形式總結(jié)分析了vue.js常見過濾器相關使用技巧與操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要給大家介紹了關于Element-UI中el-table如何合并相同單元格的相關資料,el-table的組件的可以合并單元格,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08