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