開發場景

當使用 Vue 框架進行專案開發時，在 vue.config.js 中配置好了路徑別名後，到其他頁面引入元件、引入 css 、引入靜態檔案路徑時，使用路徑別名不會智慧提示路徑。雖然在 vscode 中安裝了Path Intellisense 外掛，但是並無作用。這樣容易出現路徑拼寫錯誤的低能問題，同時也會造成開發效率降低

解決方案

在專案 package.json 所在同級目錄下建立檔案 jsconfig.json， 來解決別名路徑不提示的問題。（配置完儲存檔案後需要重啟編輯器才能生效。而且它只能識別 .vue 和 .js結尾的檔案，css檔案與其他的靜態檔案依然沒有提示， 不推薦！！！）

// .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 配置（該方案是最優選，能識別任意格式檔案，覆蓋率最廣。當別名發生改變時只需修改配置即可）

// setting.json 
"path-intellisense.mappings": { 
  "a": "${workspaceRoot}/src","c": "${workspaceRoot}/src/components",... 
}

其他網友解決方法

專案中webpack.base.conf.js配置自定義別名

resolve: {
  extensions: ['.js','.vue','.json'],alias: {
   'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'styles': resolve('src/assets/styles')
  }
 },

在專案根目錄下建立jsconfig.json檔案，配置如下：

{
 "compilerOptions": {
  "baseUrl": ".","paths": {
   "@/*": [
    "src/*"
   ],// 配置自定義的別名匹配路徑
   "styles/*": [
    "src/assets/styles/*"
   ]
  },"target": "ES6","module": "commonjs","allowSyntheticDefaultImports": true
 },"include": [
  "src/**/*"
 ],"exclude": [
  "node_modules","dist"
 ]
}

到此這篇關於vscode中Vue別名路徑提示的實現的文章就介紹到這了,更多相關vscode Vue別名路徑提示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！