使用vite創(chuàng)建vue3之vite.config.js的配置方式
更新時間：2024年08月07日 09:28:00 作者：ing*_*
這篇文章主要介紹了使用vite創(chuàng)建vue3之vite.config.js的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
使用vite創(chuàng)建vue3之vite.config.js配置
都是自我的學習中理解，有不對的不到位的歡迎大佬們指出。
參考文件：Node.js中文網(wǎng)
創(chuàng)建文件后原始內(nèi)容
知識點
url.fileURLToPath()函數(shù)字面意思就是把文件URL解碼為路徑字符串，并給定的文件URL轉(zhuǎn)換為路徑時正確地附加/調(diào)整了URL控制字符 (/，％)。
首先要明白在nodejs中path模塊的導入方式 :
在vue cli 使用webpack環(huán)境中:
const path = require('path')
const pathName = path.join(__dirname,'index.html')但是在vite中使用上面的導入方式就會發(fā)現(xiàn)vite在ES 模塊里面沒有定義require,需要用import來代替。
import path from 'path'
const pathImport = path.join(__dirname,'index.html')使用import也會報錯的哦，__dirname is nodt defined in ES module scope。
alias 別名，resolve.alias,兩種類型，一個是對象的類型，另一個是數(shù)組的類型。
// 第一種寫法
resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url))}}
// 第二種寫法
resolve: {alias: [{ find:'@', replacement: fileURLToPath(new URL('./src', import.meta.url))}] }代理配置
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了使用vue-pdf@4.3.0時遇到的上傳特殊PDF文件無法正常預覽的問題,通過查看控制臺報錯信息,發(fā)現(xiàn)是因為缺少字體導致的,解決方法是修改pdfjs-dist庫的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應(yīng)用這個修改,使用了patch-package插件,感興趣的朋友一起看看吧2024-11-11
關(guān)于在Vue中import和require的用法分析
在Vue項目中，我們經(jīng)常需要引入外部的模塊或文件，這時候就會用到import和require這兩個關(guān)鍵字，本文將詳細分析它們的用法，并提供具體的代碼實例和解釋,需要的朋友可以參考下2023-06-06
Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
這篇文章主要介紹了vue數(shù)據(jù)變化但頁面刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue子組件向父組件傳值方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-03-03
nuxt 實現(xiàn)在其它js文件中使用store的方式
這篇文章主要介紹了nuxt 實現(xiàn)在其它js文件中使用store的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了使用Nuxt.js改造已有項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
使用Element-UI的NavMenu如何隱藏自帶的小箭頭
這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了用vue封裝插件并發(fā)布到npm的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴}
這篇文章主要介紹了ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴},具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11