快捷導(dǎo)航

vite中使用@配置路徑別名過(guò)程示例

更新時(shí)間：2023年08月31日 14:30:56 作者：大甜甜

這篇文章主要為大家介紹了vite中使用@配置路徑別名過(guò)程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

打開(kāi) vite.config.ts 文件，配置 alias 參數(shù)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    //設(shè)置路徑別名
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve('')
      },
  }
})

打開(kāi) tsconfig.json 文件

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

重新運(yùn)行

使用

import Home from '@/views/index/index.vue'

以上就是vite中使用@配置路徑別名過(guò)程示例的詳細(xì)內(nèi)容，更多關(guān)于vite使用@配置路徑別名的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue中的@blur事件當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題
這篇文章主要介紹了Vue中的@blur事件當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue項(xiàng)目,代碼提交至碼云,iconfont的用法說(shuō)明
這篇文章主要介紹了vue項(xiàng)目,代碼提交至碼云,iconfont的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
詳解如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)
最近參與了公司一個(gè)新的B端項(xiàng)目的研發(fā),從無(wú)到有搭建項(xiàng)目的過(guò)程中,遇到了關(guān)于項(xiàng)目鑒權(quán)的問(wèn)題,這篇文章主要給大家介紹了關(guān)于如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)的相關(guān)資料,需要的朋友可以參考下
2022-05-05
vue element中axios下載文件（后端Python）
這篇文章主要介紹了vue element中axios下載文件（后端Python）的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
vue elementUI tree樹(shù)形控件獲取父節(jié)點(diǎn)ID的實(shí)例
今天小編就為大家分享一篇vue elementUI tree樹(shù)形控件獲取父節(jié)點(diǎn)ID的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue傳參一籮筐(頁(yè)面、組件)
這篇文章主要介紹了Vue傳參一籮筐(頁(yè)面、組件)，Vue頁(yè)面、組件之間傳參方式繁多，此處羅列出常用的幾種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
vue使用wavesurfer.js解決音頻可視化播放問(wèn)題
Wavesurfer.js是一款基于HTML5?canvas和Web?Audio的聲紋可視化插件，功能十分強(qiáng)大，在Vue框架中嵌入使用該插件，今天重點(diǎn)給大家介紹下vue使用wavesurfer.js解決音頻可視化播放問(wèn)題，感興趣的朋友一起看看吧
2022-04-04
詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06
Nuxt的路由配置和參數(shù)傳遞方式
這篇文章主要介紹了Nuxt的路由配置和參數(shù)傳遞方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
詳解Vue.js自定義tipOnce指令用法實(shí)例
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12