欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vite.config.js無(wú)法使用__dirname的問(wèn)題

 更新時(shí)間：2023年10月09日 17:13:28   作者：fly丶知秋  
這篇文章主要介紹了解決vite.config.js無(wú)法使用__dirname的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vite.config.js無(wú)法使用__dirname

__dirname 是 commonjs 規(guī)范的內(nèi)置變量。

如果使用了 esm 是不會(huì)自動(dòng)注入這個(gè)變量的。

在 commonjs 中，注入了 __dirname ， __filename , module , exports , require 五個(gè)內(nèi)置變量用于實(shí)現(xiàn)導(dǎo)入導(dǎo)出的能力。而在 esm 中實(shí)現(xiàn)方式是不一樣的。

在 esm 中，顯然模塊的導(dǎo)入導(dǎo)出使用 export/import ，自然不會(huì)再用 exports/require ，同理 __dirname ， __filename 也有對(duì)應(yīng)的寫(xiě)法。

方法一

首先，使用 node:url 模塊中的URL和 fileURLToPath 函數(shù)對(duì)URL進(jìn)行解析和轉(zhuǎn)換。

然后，使用URL構(gòu)造函數(shù)的第一個(gè)參數(shù)傳入"."，即當(dāng)前目錄的相對(duì)路徑，再結(jié)合 import.meta.url 來(lái)獲取當(dāng)前目錄的URL。

最后，使用 fileURLToPath 函數(shù)將URL轉(zhuǎn)換為文件路徑，從而獲取所需的 __dirname 

// 方法一
import { URL, fileURLToPath } from "node:url";
// 獲取__filename
function getCurrnetFile () {
    return fileURLToPath(import.meta.url);
}
// 獲取__dirname
function getCurrnetDir () {
    const url = new URL(".", import.meta.url);
    return fileURLToPath(url);
}

方法二

這種方法使用了 node:path 模塊中的 dirname 函數(shù)和 node:url 模塊中的 fileURLToPath 函數(shù)。

首先，使用 fileURLToPath 函數(shù)將 import.meta.url 轉(zhuǎn)換為文件路徑，獲取當(dāng)前文件的路徑 __filename 。

然后，使用 dirname 函數(shù)將文件路徑轉(zhuǎn)換為所在目錄的路徑 __dirname ，從而得到了 __dirname 。

// 方法二
import { dirname } from "node:path";
import { fileURLToPath } from "node:url";
// 獲取__filename
function getCurrnetFile () {
    return fileURLToPath(import.meta.url);
}
// 獲取__dirname
function getCurrnetDir () {
    const __filename = fileURLToPath(import.meta.url);
    const __dirname = dirname(__filename);
    return __dirname;
}

可以看到使用了一個(gè)關(guān)鍵API import.meta.url ，其實(shí) import.meta 是 ECMA 規(guī)范的一部分：

The import.meta object exposes context-specific metadata to a JavaScript module.

It contains information about the module, like the module’s URL.

言下之意， import.meta 提供了一個(gè)模塊的上下文信息。

總之，以上兩種方法都是在ESM中模擬獲取 __dirname 的功能。

它們利用 import.meta.url 獲取模塊的URL，然后使用相關(guān)的Node.js內(nèi)置模塊對(duì)URL或文件路徑進(jìn)行解析，從而得到當(dāng)前模塊所在的目錄路徑

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • VUE使用vuex解決模塊間傳值問(wèn)題的方法

    VUE使用vuex解決模塊間傳值問(wèn)題的方法

    本篇文章主要介紹了VUE使用vuex解決模塊間傳值問(wèn)題 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • Vue組件設(shè)計(jì)之多列表拖拽交換排序功能實(shí)現(xiàn)

    Vue組件設(shè)計(jì)之多列表拖拽交換排序功能實(shí)現(xiàn)

    這篇文章主要介紹了Vue組件設(shè)計(jì)之多列表拖拽交換排序,常見(jiàn)的場(chǎng)景有單列表拖拽排序，多列表拖拽交換排序，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-05-05
  • Vue API中setup ref reactive函數(shù)使用教程

    Vue API中setup ref reactive函數(shù)使用教程

    setup是用來(lái)寫(xiě)組合式api，內(nèi)部的數(shù)據(jù)和方法需要通過(guò)return之后，模板才能使用。在之前vue2中，data返回的數(shù)據(jù)，可以直接進(jìn)行雙向綁定使用，如果我們把setup中數(shù)據(jù)類型直接雙向綁定，發(fā)現(xiàn)變量并不能實(shí)時(shí)響應(yīng)。接下來(lái)就詳細(xì)看看它們的使用
    2022-12-12
  • vue中的數(shù)據(jù)綁定原理的實(shí)現(xiàn)

    vue中的數(shù)據(jù)綁定原理的實(shí)現(xiàn)

    本篇文章主要介紹了vue中的數(shù)據(jù)綁定原理的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07
  • vue2 前后端分離項(xiàng)目ajax跨域session問(wèn)題解決方法

    vue2 前后端分離項(xiàng)目ajax跨域session問(wèn)題解決方法

    本篇文章主要介紹了vue2 前后端分離項(xiàng)目ajax跨域session問(wèn)題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • Vue element-admin權(quán)限控制之按鈕使用

    Vue element-admin權(quán)限控制之按鈕使用

    這篇文章主要介紹了Vue element-admin權(quán)限控制之按鈕使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2025-04-04
  • vue3+vite多項(xiàng)目多模塊打包(基于vite-plugin-html插件)

    vue3+vite多項(xiàng)目多模塊打包(基于vite-plugin-html插件)

    這篇文章主要給大家介紹了關(guān)于vue3+vite基于vite-plugin-html插件實(shí)現(xiàn)多項(xiàng)目多模塊打包的相關(guān)資料,現(xiàn)在很多小伙伴都已經(jīng)使用Vite+Vue3開(kāi)發(fā)項(xiàng)目了,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • VUE中如何實(shí)現(xiàn)阻止事件冒泡

    VUE中如何實(shí)現(xiàn)阻止事件冒泡

    這篇文章主要介紹了VUE中如何實(shí)現(xiàn)阻止事件冒泡，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • Vue3中watchEffect的用途淺析

    Vue3中watchEffect的用途淺析

    這篇文章主要給大家介紹了關(guān)于Vue3中watchEffect用途的相關(guān)資料, watch和watchEffect都是監(jiān)聽(tīng)器,但在寫(xiě)法和使用上有所區(qū)別,本文進(jìn)行了詳細(xì)的介紹,需要的朋友可以參考下
    2021-07-07
  • Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理技巧

    Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理技巧

    這篇文章主要介紹了Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理,本文給大家介紹兩種方法一種是借助canvas的封裝的文件壓縮上傳，二是使用compressorjs第三方插件實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)需要的朋友可以參考下
    2022-11-11

最新評(píng)論