快捷導(dǎo)航

vite配置@別名以及讓vscode智能提示路經(jīng)的步驟

更新時(shí)間：2023年08月15日 11:09:13 作者：相見一月

這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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/*"]
    }, 
  },
}

如果運(yùn)行不了或報(bào)錯(cuò)試下安裝下 @types/node ，沒(méi)有報(bào)錯(cuò)可以不用安裝，有安裝也沒(méi)事

 npm install @types/node

vscode智能提示

如果沒(méi)有提示先下載VScode插件（通用，不至vite，只要配置好@別名就行）

Path-intellisense

安裝好后，發(fā)現(xiàn)不加一個(gè)名字就會(huì)以下情況

下面是正確的路徑

如果還是沒(méi)有提示或提示錯(cuò)誤（只提示當(dāng)前路徑下的頁(yè)面），可能是綠色框中要寫個(gè)名，或給個(gè)空對(duì)象{}才可以

但這不是我們想要的，我們想要沒(méi)有寫名字的（名字可能沒(méi)想好的）情況下，加個(gè)@/就有src路徑下的提示

按照以下步驟來(lái)做就好：

復(fù)制以下內(nèi)容到settings.json

{
    ....
    //添加以下配置（主要是前兩個(gè)）
    "path-intellisense.mappings": {
        "@/": "${workspaceFolder}/src",
        "/": "${workspaceFolder}",
        "lib": "${workspaceFolder}/lib",
        "global": "/Users/dummy/globalLibs"
    },
    "path-intellisense.autoTriggerNextSuggestion": true,
}

這樣就算沒(méi)有加一個(gè)名也可以有自動(dòng)提示了

總結(jié)

到此這篇關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的文章就介紹到這了,更多相關(guān)vite配置@別名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue使用el-table 添加行手動(dòng)填寫數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點(diǎn)擊新增按鈕實(shí)現(xiàn)下列彈窗的效果,點(diǎn)擊添加行新增一行,點(diǎn)擊刪除進(jìn)行刪除行,點(diǎn)擊提交將數(shù)據(jù)傳遞到后端進(jìn)行保存,怎么實(shí)現(xiàn)的呢,下面通過(guò)實(shí)例代碼給大家詳細(xì)講解,感興趣的朋友一起看看吧
2023-12-12
elementUI同一頁(yè)面展示多個(gè)Dialog的實(shí)現(xiàn)
這篇文章主要介紹了elementUI同一頁(yè)面展示多個(gè)Dialog的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法
NProgress.js是輕量級(jí)的進(jìn)度條組件，使用簡(jiǎn)便，可以很方便集成到單頁(yè)面應(yīng)用中。這篇文章主要介紹了在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法,需要的朋友可以參考下
2018-01-01
Vue中配置使用process.env詳解
process.env?是?Node.js?中的一個(gè)環(huán)境對(duì)象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進(jìn)行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下
2023-03-03
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中，給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
vue中如何讓子組件修改父組件數(shù)據(jù)
這篇文章主要介紹了vue中子組件修改父組件數(shù)據(jù)的相關(guān)資料，文中介紹了vue中watch的認(rèn)識(shí)，關(guān)于子組件修改父組件屬性認(rèn)識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
vue中__ob__:?Observer的踩坑記錄
這篇文章主要介紹了vue中__ob__:?Observer的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue中使用require.context自動(dòng)引入組件的操作方法
require.context?是?webpack?提供的一個(gè)API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個(gè)模塊,并且可以靈活地控制模塊的加載順序和依賴關(guān)系,本文給大家講解Vue中使用require.context自動(dòng)引入組件的方法,感興趣的朋友一起看看吧
2024-01-01
Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下
2023-02-02
vue引入組件的幾種方法代碼示例
vue的一個(gè)強(qiáng)大功能就是組件化開發(fā),下面這篇文章主要給大家介紹了關(guān)于vue引入組件的幾種方法,文中給出了詳細(xì)的代碼及圖文介紹,需要的朋友可以參考下
2024-04-04