vue2把webpack框架迁移到Vite、我们在尽量不改变源代码的基础上只增加Vite的配置项、使得也能进行开发处理！下面就来了解下我们在迁移的过程需要做的事情！

什么项目适合迁移Vite

  • 大型vue2 的系统、启动慢、改动文件响应慢
  • 内部系统 - 无需大型流量场景：因为 vite 迭较快，导致系统需要定期改动基础功能，造成不稳定
  • 非 ssr 系统 - ssr 还有很多问题，暂且等社区丰富起来
  • 定期有人维护的系统
  • 对开发有痛点而想要改进：比如打包慢，冷启动慢，HMR 更新慢
  • vite 生产环境用 rollup，但是改造成本大，提效不高，风险大，暂不建议使用

    安装所需要的依赖包

    这是我的依赖包的版本、如果使用不了建议下载指定版本包

“vite”: “^2.8.6”,
“vite-plugin-html”: “^3.2.0”, //指定index.html位置插件
“vite-plugin-vue2”: “^1.9.3”, // 专门用来支持 vue2 的插件、来自vite团队人员开发、支持JSX
“@originjs/vite-plugin-require-context”: “^1.0.9” // 解决require.context问题
cjs2esmodule //可选,将 commonjs 转化为 es module

  1. yarn add vite vite-plugin-html vite-plugin-vue2 @originjs/vite-plugin-require-context -D
  3. // package.json  添加指令
  4. "scripts": {
  5.   "vite": "vite"
  6. }

根节点创建vite.config.js

  1. import { defineConfig } from "vite";
  2. import path from "path";
  4. import { createVuePlugin } from "vite-plugin-vue2";
  5. import { createHtmlPlugin } from "vite-plugin-html";
  6. import ViteRequireContext from "@originjs/vite-plugin-require-context"
  7. function resolve(dir) {
  8.   return path.join(__dirname, "./", dir)
  9. }
  10. export default defineConfig({
  11.   root: "./",
  12.   publicDir: "public",
  13.   base: "./",
  14.   mode: "development",
  15.   optimizeDeps: {
  16.       include: []
  17.   },
  18.   resolve: {
  19.       alias: {
  20.           "@": resolve("src"),
  21.           "@img": resolve("src/assets/images"),
  22.           "@components": resolve("src/components"),
  23.           "@view": resolve("src/view"),
  24.           "@service": resolve("src/service"),
  25.           "@lib": resolve("src/lib"),
  26.           "@envPath": resolve("src/environments/environment.test.js"),
  27.           "~": path.join(__dirname, "node_modules"),
  28.       },
  29.       extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"] //解决vite一定要.vue组件问题
  30.   },
  31.   plugins: [
  32.       cjs2esmVitePlugin(),
  33.       createVuePlugin({
  34.           jsx: true,
  35.           jsxOptions: {
  36.               injectH: false,
  37.               compositionAPI: true
  38.           },
  39.       }),
  40.       createHtmlPlugin({
  41.           minify: true,
  42.           entry: "src/main.js",
  43.           template: "public/index.html",  //指定index.html路径
  44.           inject: {
  45.               data: {
  46.                   title: "index",
  47.                   injectScript: "<script src=\"./inject.js\"></script>",
  48.               },
  49.               tags: [
  50.                   {
  51.                       injectTo: "body-prepend",
  52.                       tag: "div",
  53.                       attrs: {
  54.                           id: "tag"
  55.                       }
  56.                   }
  57.               ]
  58.           }
  59.       }),
  60.       ViteRequireContext()
  61.   ],
  62.   define: {
  63.       "process.env": process.env
  64.   },
  65.   server: {
  66.       port: 3001,
  67.       proxy: {}
  68.   }
  69. });

启动

yarn vite

然后就看项目具体报错信息、一步一步改动、因为vite太快了、所以都是值得的。

踩坑笔记

组件使用render语法

image.png

  1. createVuePlugin({
  2.     jsx: true, // 开启jsx
  3.     jsxOptions: {
  4.         injectH: false,
  5.         compositionAPI: true
  6.     },
  7. }),

解决： 在组件