基于webpack与vite创建vue项目的区别

一、区别

基于webpack构建的vue项目

在Webpack中，要启动一个服务需要先编译，再启动。

比如更新第二个route（页面），跟其他route（页面）没关系，但是webpack还是会把他们都重新编译解析一下，导致在开发阶段要等个5秒或者10秒，大大降低了开发效率

基于vite构建的vue项目

在Vite中，是先启动服务，如果你需要某一个文件，再进行编译。

这就造成Vite启动服务的速度比Webpack快了太多，即“按需编译”。

vite，你修改了某个文件，那么他只会更新某个文件，跟其他的文件无关，其他的文件不需要重新加载

总结：

1. 基于webpack的项目，不管模块是否执行，都要打包进bundle里，当项目很大时，打包时间非常久
2. 解决:使用vite
3. vite优势：在开发过程中大大提升我们的效率
4. Vite则利用现代浏览器原生支持ESM特性，省略了对模块的打包，只有具体请求某一个文件时，才会进行打包。

二、热更新

• 热更新的时候：Vite：只需要立即编译当前所修改的文件即可，所以响应速度非常快。
• 而Webpack修改某个文件过后，会自动以这个文件为入口重写build一次，所有的涉及到的依赖也都会被加载一遍，所以反应速度会慢很多。

三、创建vue3项目：基于vite

npm init @vitejs/app 项目名称

如果选择的是vue项目，那么默认版本是vue3，vite是可以支持创建其他技术栈的框架的。

步骤：

1. npm init @vitejs/app oratest 或者 npm init vite@latest

2. 使用vite创建的vue项目是没有vuex router的，所以要从基于webpack创建的vue项目把src文件夹复制替换到用vite创建的项目中

3. 把用基于webpack用vue create app指令创建的package.json中的dependencies复制粘贴到vite创建的package.json中

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
    

5. npm i 安装依赖
6. npm run dev 启动项目，修改一下错误

特别提示：复制过来的router.js中，process.env.BASE_URL vite里面是没有的，改成斜杠即可