使用vite进行vue2老项目开发

1为什么使用vite

随着尤大发布vite以来，社区讨论的热度居高不下，用过的人都说好，属于那种用一次就再也离不开的工具，那么vite到底解决了什么痛点：

使用webpack开发项目，启动项目的时间会随着项目的体积增大而加长，少则十几秒多则一两分钟，最致命的热更新的时间也非常的长，写一行代码要半天才能看到效果，这就大大降低的开发的效率和幸福感。

2vite的工作原理

Vite，一个基于浏览器原生 ES imports 的开发服务器（只支持现代浏览器）。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。

3无侵入的使用vite

在我们的老项目中完全抛弃webpack而使用vite是不太现实的，1是vite的生态还不太成熟，2是改造成本太大。这里我们只用vite来进行老项目的开发(当然还是支持webpack开发的，这里只是新增了一种开发工具，不破坏原有项目的架构)，打包还使用webpack。

1安装依赖

npm install vite -D
npm install vite-plugin-vue2 -D
npm install @originjs/vite-plugin-commonjs -D  

2根目录新建 vite.config.js

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'
import { viteCommonjs }  from "@originjs/vite-plugin-commonjs"  
 
export default defineConfig({
  build:{
    sourcemap:false
  }, 
  plugins: [
    createVuePlugin(),
    viteCommonjs(),//require引入转换成import引入
  ],
  resolve: {
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      '@': resolve('src'),
    }
  },
  server: {
    host: '0.0.0.0',
    port: 8080,
    open: '/', //自动在浏览器中打开项目 
    proxy: {
      '/api': {
        target: '', //接口地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      },
    }
  },
})

3根目录新建index.html

把public目录下的index.html文件复制一份放到跟目录，并且添加如下代码（vite要求index.html必须在根目录）

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

4package.json添加启动代码

"dev-vite": "vite",

5注意事项

vite不支持require方式引入，项目中必须使用import方式引入。(引入@originjs/vite-plugin-commonjs插件可解决，上方已引入，按需使用)

4感悟

浏览器操作dom不方便所以有了jQuery，浏览器不支持模块化所以有了webpack,也许这些优秀的工具最终都会消失在技术更迭的长河中，但他们所做的贡献值得永远被铭记，致敬！！！