快捷導(dǎo)航

webpack轉(zhuǎn)vite的詳細(xì)操作流程與問(wèn)題總結(jié)

更新時(shí)間：2023年03月17日 14:48:39 作者：白茶_White

Vite是新一代的前端開(kāi)發(fā)與構(gòu)建工具,相比于傳統(tǒng)的webpack,Vite 有著極速的本地項(xiàng)目啟動(dòng)速度(通常不超過(guò)5s)以及極速的熱更新速度(幾乎無(wú)感知),下面這篇文章主要給大家介紹了關(guān)于webpack轉(zhuǎn)vite的詳細(xì)操作流程與問(wèn)題總結(jié)的相關(guān)資料,需要的朋友可以參考下

前言

最近在開(kāi)發(fā)一個(gè)超級(jí)大的管理端項(xiàng)目，每次啟動(dòng)都要在8、9分鐘，熱更新一次也需要40秒,十分折磨，試過(guò)很多提速方法，都沒(méi)有效果；周二晚上看到了vite-下一代前端開(kāi)發(fā)與構(gòu)建工具,周三上班就開(kāi)始從網(wǎng)上翻找教程，經(jīng)歷過(guò)無(wú)數(shù)bug,歷經(jīng)兩天，終于解決，特此記錄一下所有流程與踩坑經(jīng)歷

一、全局安裝wp2vite

npm install -g wp2vite

二、在項(xiàng)目中執(zhí)行一下命令

執(zhí)行之前記得安裝好依賴：npm install

wp2vite --config=./vue.config.js //你的webpack配置文件

執(zhí)行完以上命令后再執(zhí)行一遍：npm install

截止這一步，主要操作搞定

三、項(xiàng)目配置操作

1、刪除原有public目錄下的index.html文件

2、修改根目錄下的index.html，引用自己的main.js文件

<script type="module" src="/src/main.ts"></script>

我的是ts，可自行修改

3、重點(diǎn)：vite.config.js

①設(shè)置alias,增加絕對(duì)路徑@

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'),
  }

②設(shè)置proxy,就是你的代理

在proxy對(duì)象中添加代理

注意此時(shí)寫(xiě)法有變，將pathRewrite修改為rewrite，舉個(gè)栗子

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報(bào)錯(cuò)

如果你用到了require.context（），請(qǐng)?zhí)鎿Q為import.meta.globEager（），示范如下

const requires = require.context('@/modules', true, /router\.ts$/);//原有
const requires = import.meta.globEager("@/modules/*/router.ts")//修改后

5、path.resolve報(bào)錯(cuò)

先安裝依賴

npm install path-browserify --save

修改引入方式為

import path from 'path-browserify'

四、啟動(dòng)項(xiàng)目

npm run dev

五、速度比較

啟動(dòng)速度

vite

vite啟動(dòng)

webpack

實(shí)在太慢，不想截圖了

熱更新速度

biu~bang //超級(jí)快

錄了視頻，但是要轉(zhuǎn)成gif，不想轉(zhuǎn)，改vue頁(yè)面改完就能生效，都不用刷新頁(yè)面；改ts文件也是立刻生效，會(huì)自動(dòng)刷新頁(yè)面

總結(jié)

到此這篇關(guān)于webpack轉(zhuǎn)vite的詳細(xì)操作流程與問(wèn)題總結(jié)的文章就介紹到這了,更多相關(guān)webpack轉(zhuǎn)vite操作流程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: