vue2老项目如何迁移到最新的vite 其实很简单

长安夜2025-03-17 10:25

公司原有的vue项目是基于webpack的，启动和热更新都非常慢，公司决定把项目迁移到vite。

第一步：执行npm init vite@latest，命名vue2-vite

第二步，选择vanilla，这是不带框架的js空项目

第三步,新建vite.config.js文件,空项目使用的是vite默认配置，我们需要用到vue2的插件需要做配置

第四步，安装插件 @vitejs/plugin-vue2 和 vite-plugin-commonjs，前者是vue2的vite插件，或者是commonjs转esm的插件，由于vue2的很多第三方库是commonjs的组织方式，而vite是esm形式的，unplugin-vue-components是我自己装的组件库懒加载插件，需要指定特定组件库的相对路径，公司的组件几百个，统一加载的话bundle太庞大了。

js 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue2";
import commonjs from "vite-plugin-commonjs";
import Components from "unplugin-vue-components/vite";
export default defineConfig({
  plugins: [
    vue(),
    commonjs(),
    Components({})
  ]
})

第五步，删除src目录下的所有文件，新建熟悉的main.js文件

js 复制代码

import vue from 'vue'
import App from './App.vue'
new vue({
  el: '#app',
  render: h => h(App)
})

和App.vue文件

js 复制代码

<template>
  <div>vue 2 with vite</div>
</template>

<script>
export default {
  name: "App",
};
</script>

到这里就大功告成了，npm run dev，熟悉的5173就启动了。

是不是很简单，网上一堆错误教程，很多都是基于vite2的那一套，搞得我错了一下午，vite4之后已经不再和vue强绑定了，成了一个通用的开发打包平台，其他框架只需要以插件的形式载入就开始进行开发，非常便利。原来基于webpack的项目启动需要6分钟，现在只需要十多秒，改动时候热更新几乎无延迟，体验大大提升。