【webpack转vite】操作流程与问题

	最近在开发一个超级大的管理端项目,每次启动都要在8、9分钟,热更新一次也需要40秒,十分折磨,试过很多提速方法,都没有效果;周二晚上看到了vite-下一代前端开发与构建工具,周三上班就开始从网上翻找教程,经历过无数bug,历经两天,终于解决,特此记录一下所有流程与踩坑经历

一、全局安装wp2vite

npm install -g wp2vite

二、在项目中执行一下命令

执行之前记得安装好依赖:npm install

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

执行完以上命令后再执行一遍: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(),请替换为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

vite启动

webpack
实在太慢,不想截图了

热更新速度

biu~bang //超级快

录了视频,但是要转成gif,不想转,改vue页面改完就能生效,都不用刷新页面;改ts文件也是立刻生效,会自动刷新页面

完结撒花

  • 11
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值