快捷導(dǎo)航

vue3中vite的@路徑別名與path中resolve實(shí)例詳解

更新時(shí)間：2023年02月01日 09:36:45 作者：有玉微涼，是為櫻瑯

這篇文章主要給大家介紹了關(guān)于vue3中vite的@路徑別名與path中resolve的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

使用@路徑引用

在vue3中，想用@符號(hào)代替./…/這種相對(duì)路徑引用使用，前者相當(dāng)于從根目錄往后找，后者相當(dāng)于從后往前找。

具體方法就是在vite.config.js中

import { resolve } from "path"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // ↓路徑別名，主要是這部分
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
})

vite中關(guān)于這個(gè)的相關(guān)配置說(shuō)明在這里

https://cn.vitejs.dev/config/shared-options.html#resolve-alias

resolve解析

這個(gè)resolve是node_modules中的path里面的pash.js提供的一個(gè)解析路徑的方法，他總是返回一個(gè)以相對(duì)于當(dāng)前的工作目錄的絕對(duì)路徑。

官網(wǎng)提供的例子

var path = require("path")     //引入node的path模塊

path.resolve('/foo/bar', './baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', 'baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', '/baz')   // returns '/baz'
path.resolve('/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','./foo/bar', '../baz')   // returns '當(dāng)前工作目錄/home/foo/baz'
path.resolve('home','foo/bar', '../baz')   // returns '當(dāng)前工作目錄/home/foo/baz'

resolve 具體工作方法我的理解就是從后往前先找絕對(duì)路徑，如果找到了就以這個(gè)路徑為開頭，如果沒(méi)有找到絕對(duì)路徑，就以當(dāng)前文件所在的工作目錄為開頭。

有了開頭之后，他前面的路徑就都不要了，從他開始往后找路徑，如果是./開頭的或者他自己名字開頭的就把它拼接上來(lái)，如果是…/開頭的就把前面的最后一個(gè)路徑取消掉，把他拼接上去。

而這個(gè)__dirname 在resolve方法中是指向被執(zhí)行 js 文件的絕對(duì)路徑，他有個(gè)好兄弟叫__filename，區(qū)別說(shuō)他還要在后面加上當(dāng)前文件。
然后這里的路徑就是絕對(duì)路徑來(lái)替換@

在這里想說(shuō)明一下這個(gè)roselve方法，你使用上面這個(gè)方法的時(shí)候，可能會(huì)報(bào)錯(cuò)，并且系統(tǒng)會(huì)給你一個(gè)建議的寫法

import { resolve } from "path"
//他會(huì)要求你把上面的寫法改成下面的才可以運(yùn)行
import pkg from "path"
const { resolve } = pkg;

原因是因?yàn)閚ode.js中的導(dǎo)出方式是用的module.exports，并不是exports，他不支持具名導(dǎo)出，他只導(dǎo)出了一個(gè)對(duì)象，我們?cè)谝玫臅r(shí)候不能使用import ｛｝ from 的方式，只能先引入這個(gè)對(duì)象，再取其中的一個(gè)方法，可能還有別的辦法可以解決這個(gè)問(wèn)題，筆者還未找到，留待以后學(xué)習(xí)。