webpack转vite的操作流程与问题是什么

今天小编给大家分享一下webpack转vite的操作流程与问题是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、全局安装wp2vite

npm install -g wp2vite

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

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

wp2vite --config=./Vue.config.js //你的WEBpack配置文件

执行完以上命令后再执行一遍：npm install

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

三、项目配置操作

删除原有public目录下的index.html文件

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

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

我的是ts，可自行修改

重点：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/, '')    },

require报错

如果你用到了require.context（），请替换为import.meta.globEager（），示范如下

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

path.resolve报错

先安装依赖

npm install path-browserify --save

修改引入方式为

import path from 'path-browserify'

四、启动项目

npm run dev

五、速度比较

启动速度

vite

webpack

实在太慢，不想截图了

热更新速度

biu~bang //超级快

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

以上就是“webpack转vite的操作流程与问题是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。