使用vite創(chuàng)建vue3之vite.config.js的配置方式
更新時(shí)間：2024年08月07日 09:28:00 作者：ing*_*
這篇文章主要介紹了使用vite創(chuàng)建vue3之vite.config.js的配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
使用vite創(chuàng)建vue3之vite.config.js配置
都是自我的學(xué)習(xí)中理解，有不對(duì)的不到位的歡迎大佬們指出。
參考文件：Node.js中文網(wǎng)
創(chuàng)建文件后原始內(nèi)容
知識(shí)點(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 模塊里面沒(méi)有定義require,需要用import來(lái)代替。
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è)是對(duì)象的類型，另一個(gè)是數(shù)組的類型。
// 第一種寫(xiě)法
resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url))}}
// 第二種寫(xiě)法
resolve: {alias: [{ find:'@', replacement: fileURLToPath(new URL('./src', import.meta.url))}] }代理配置
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementUI表格多選框this.$refs.xxx.toggleRowSelection無(wú)效問(wèn)題
這篇文章主要介紹了elementUI表格多選框this.$refs.xxx.toggleRowSelection無(wú)效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
X6 是 AntV 旗下的圖編輯引擎，提供了一系列開(kāi)箱即用的交互組件和簡(jiǎn)單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應(yīng)用。接下來(lái)就看看vue如何使用它2021-05-05
有時(shí)候我們使用el-table的選擇框時(shí),如果涉及修改、刪除時(shí),可能一次只允許用戶選擇一條,這樣的話如果使用頂部的全選復(fù)選框就不合適了,這篇文章主要給大家介紹了關(guān)于el-table表頭全選框隱藏或禁用設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-09-09
Vue3+ElementPlus 表單組件的封裝實(shí)例
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能（promise封裝）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
@font-face?是?CSS?中的一個(gè)規(guī)則,它允許你加載服務(wù)器上的字體文件（遠(yuǎn)程或者本地）,并在網(wǎng)頁(yè)中使用這些字體,本文給大家介紹了Vue使用font-face自定義字體的案例,并通過(guò)代碼講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
本篇文章主要介紹了vue 實(shí)現(xiàn)全選全不選的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
路由守衛(wèi)又稱導(dǎo)航守衛(wèi)，指是路由跳轉(zhuǎn)前、中、后過(guò)程中的一些鉤子函數(shù),這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下2023-02-02