webpack转vite的详细操作流程与问题总结

更新时间：2023年03月17日 14:48:39 作者：白茶_White

Vite是新一代的前端开发与构建工具,相比于传统的webpack,Vite 有着极速的本地项目启动速度(通常不超过5s)以及极速的热更新速度(几乎无感知),下面这篇文章主要给大家介绍了关于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文件也是立刻生效，会自动刷新页面

总结

到此这篇关于webpack转vite的详细操作流程与问题总结的文章就介绍到这了,更多相关webpack转vite操作流程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3中自定义事件总线的实现代码
随着 Vue 3 的发布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再适用或有所变化,为了应对这种变化,我们可以选择在 Vue 3 应用中实现自定义的“事件总线”机制,所以本文给大家介绍了Vue3中如何自定义消息总线,需要的朋友可以参考下
2024-05-05
vue在页面中如何使用window全局变量
这篇文章主要介绍了vue在页面中如何使用window全局变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue数字相加、相减精度丢失处理3种方法
这篇文章主要给大家介绍了关于Vue数字相加、相减精度丢失处理3种方法的相关资料,前端在操作加减乘除计算时,经常会出现精度缺失问题,有时会显示为科学计数的样式,需要的朋友可以参考下
2023-08-08
Vue如何利用flex布局实现TV端城市列表功能
用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的,下面这篇文章主要给大家介绍了关于Vue如何利用flex布局实现TV端城市列表功能的相关资料,需要的朋友可以参考下
2023-01-01
Vue和原生JS中如何使用自定义字体
这篇文章主要为大家详细介绍了Vue和原生JS中如何使用自定义字体,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
2024-01-01
vue 组件中使用 transition 和 transition-group实现过渡动画
本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-07-07
vue-cli构建vue项目的步骤详解
这篇文章主要介绍了vue-cli构建vue项目的步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
vue中的v-if基本使用(最新推荐)
v-if根据表达式的真假，切换元素的显示和隐藏操作DOM元素，这篇文章主要介绍了vue中的v-if基本使用,需要的朋友可以参考下
2022-12-12
如何在JS文件中获取Vue组件
这篇文章主要介绍了如何在JS文件中获取Vue组件，帮助大家更好的理解和学习前端知识，感兴趣的朋友可以了解下
2020-09-09
Vue router 路由安装及使用过程
vue-router 是 Vue 的一个插件库，适用于构建单页面应用，这篇文章主要介绍了Vue router 路由安装以及使用,本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-10-10