webpack轉(zhuǎn)vite的詳細操作流程與問題總結(jié)
前言
最近在開發(fā)一個超級大的管理端項目，每次啟動都要在8、9分鐘，熱更新一次也需要40秒,十分折磨，試過很多提速方法，都沒有效果；周二晚上看到了vite-下一代前端開發(fā)與構(gòu)建工具,周三上班就開始從網(wǎng)上翻找教程，經(jīng)歷過無數(shù)bug,歷經(jīng)兩天，終于解決，特此記錄一下所有流程與踩坑經(jīng)歷
一、全局安裝wp2vite
npm install -g wp2vite
二、在項目中執(zhí)行一下命令
執(zhí)行之前記得安裝好依賴：npm install
wp2vite --config=./vue.config.js //你的webpack配置文件
執(zhí)行完以上命令后再執(zhí)行一遍：npm install
截止這一步，主要操作搞定
三、項目配置操作
1、刪除原有public目錄下的index.html文件
2、修改根目錄下的index.html，引用自己的main.js文件
<script type="module" src="/src/main.ts"></script>
我的是ts，可自行修改
3、重點：vite.config.js
①設置alias,增加絕對路徑@
let alias = {
'.git': path.resolve(__dirname, './.git'),
'docker': path.resolve(__dirname, './docker'),
'docs': path.resolve(__dirname, './docs'),
'node_modules': path.resolve(__dirname, './node_modules'),
'public': path.resolve(__dirname, './public'),
'src': path.resolve(__dirname, './src'),
'@': path.resolve(__dirname, 'src'),
}
②設置proxy,就是你的代理
在proxy對象中添加代理
注意此時寫法有變，將pathRewrite修改為rewrite，舉個栗子
vue.config.js
'/api': {
target: `http://localhost:8180`,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '',
},
},
vite.config.js
'/api': {
target: `http://localhost:8180`,
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
4、require報錯
如果你用到了require.context（），請?zhí)鎿Q為import.meta.globEager（），示范如下
const requires = require.context('@/modules', true, /router\.ts$/);//原有
const requires = import.meta.globEager("@/modules/*/router.ts")//修改后
5、path.resolve報錯
先安裝依賴
npm install path-browserify --save
修改引入方式為
import path from 'path-browserify'
四、啟動項目
npm run dev
五、速度比較
啟動速度
vite
webpack
實在太慢，不想截圖了
熱更新速度
biu~bang //超級快
錄了視頻，但是要轉(zhuǎn)成gif，不想轉(zhuǎn)，改vue頁面改完就能生效，都不用刷新頁面；改ts文件也是立刻生效，會自動刷新頁面
總結(jié)
到此這篇關于webpack轉(zhuǎn)vite的詳細操作流程與問題總結(jié)的文章就介紹到這了,更多相關webpack轉(zhuǎn)vite操作流程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
隨著 Vue 3 的發(fā)布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再適用或有所變化,為了應對這種變化,我們可以選擇在 Vue 3 應用中實現(xiàn)自定義的“事件總線”機制,所以本文給大家介紹了Vue3中如何自定義消息總線,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue在頁面中如何使用window全局變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關于Vue數(shù)字相加、相減精度丟失處理3種方法的相關資料,前端在操作加減乘除計算時,經(jīng)常會出現(xiàn)精度缺失問題,有時會顯示為科學計數(shù)的樣式,需要的朋友可以參考下2023-08-08
Vue如何利用flex布局實現(xiàn)TV端城市列表功能
用vue開發(fā)了三四個組件了,都是H5的,現(xiàn)在來看看PC是如何玩轉(zhuǎn)組件的,下面這篇文章主要給大家介紹了關于Vue如何利用flex布局實現(xiàn)TV端城市列表功能的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
vue 組件中使用 transition 和 transition-group實現(xiàn)過渡動畫
本文給大家分享一下vue 組件中使用 transition 和 transition-group 設置過渡動畫,總結(jié)來說可分為分為 name 版, js 鉤子操作類名版, js 鉤子操作行內(nèi)樣式版，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-07-07
這篇文章主要介紹了vue-cli構(gòu)建vue項目的步驟詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
v-if根據(jù)表達式的真假，切換元素的顯示和隱藏操作DOM元素，這篇文章主要介紹了vue中的v-if基本使用,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了如何在JS文件中獲取Vue組件，幫助大家更好的理解和學習前端知識，感興趣的朋友可以了解下2020-09-09
vue-router 是 Vue 的一個插件庫，適用于構(gòu)建單頁面應用，這篇文章主要介紹了Vue?router?路由安裝以及使用,本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-10-10