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

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

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

使用@路徑引用

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

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

import { resolve } from "path"

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

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

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

resolve解析

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

官網(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 具體工作方法我的理解就是從后往前先找絕對路徑，如果找到了就以這個路徑為開頭，如果沒有找到絕對路徑，就以當(dāng)前文件所在的工作目錄為開頭。

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

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

在這里想說明一下這個roselve方法，你使用上面這個方法的時候，可能會報錯，并且系統(tǒng)會給你一個建議的寫法

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

原因是因為node.js中的導(dǎo)出方式是用的module.exports，并不是exports，他不支持具名導(dǎo)出，他只導(dǎo)出了一個對象，我們在引用的時候不能使用import ｛｝ from 的方式，只能先引入這個對象，再取其中的一個方法，可能還有別的辦法可以解決這個問題，筆者還未找到，留待以后學(xué)習(xí)。