vite配置@別名以及讓vscode智能提示路經(jīng)的步驟
更新時間：2023年08月15日 11:09:13 作者：相見一月
這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過代碼示例以及圖文介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
vite配置@別名
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置@別名
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// ↓解析配置
resolve: {
// ↓路徑別名
alias: {
"@": resolve(__dirname, "./src")
}
}
})tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
...
// 配置@別名
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
},
}如果運行不了或報錯試下安裝下 @types/node ，沒有報錯可以不用安裝，有安裝也沒事
npm install @types/node
vscode智能提示
如果沒有提示先下載VScode插件（通用，不至vite，只要配置好@別名就行）
Path-intellisense
安裝好后，發(fā)現(xiàn)不加一個名字就會以下情況
下面是正確的路徑
如果還是沒有提示或提示錯誤（只提示當(dāng)前路徑下的頁面），可能是綠色框中要寫個名，或給個空對象{}才可以
但這不是我們想要的，我們想要沒有寫名字的（名字可能沒想好的）情況下，加個@/就有src路徑下的提示
按照以下步驟來做就好：
復(fù)制以下內(nèi)容到settings.json
{
....
//添加以下配置（主要是前兩個）
"path-intellisense.mappings": {
"@/": "${workspaceFolder}/src",
"/": "${workspaceFolder}",
"lib": "${workspaceFolder}/lib",
"global": "/Users/dummy/globalLibs"
},
"path-intellisense.autoTriggerNextSuggestion": true,
}這樣就算沒有加一個名也可以有自動提示了
總結(jié)
到此這篇關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的文章就介紹到這了,更多相關(guān)vite配置@別名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
vue使用el-table 添加行手動填寫數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點擊新增按鈕實現(xiàn)下列彈窗的效果,點擊添加行新增一行,點擊刪除進行刪除行,點擊提交將數(shù)據(jù)傳遞到后端進行保存,怎么實現(xiàn)的呢,下面通過實例代碼給大家詳細講解,感興趣的朋友一起看看吧2023-12-12
elementUI同一頁面展示多個Dialog的實現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
NProgress.js是輕量級的進度條組件，使用簡便，可以很方便集成到單頁面應(yīng)用中。這篇文章主要介紹了在vue項目中使用Nprogress.js進度條的方法,需要的朋友可以參考下2018-01-01
process.env?是?Node.js?中的一個環(huán)境對象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue中子組件修改父組件數(shù)據(jù)的相關(guān)資料，文中介紹了vue中watch的認(rèn)識，關(guān)于子組件修改父組件屬性認(rèn)識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue中__ob__:?Observer的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中使用require.context自動引入組件的操作方法
require.context?是?webpack?提供的一個API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個模塊,并且可以靈活地控制模塊的加載順序和依賴關(guān)系,本文給大家講解Vue中使用require.context自動引入組件的方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02
vue的一個強大功能就是組件化開發(fā),下面這篇文章主要給大家介紹了關(guān)于vue引入組件的幾種方法,文中給出了詳細的代碼及圖文介紹,需要的朋友可以參考下2024-04-04