迁移 Vue v2.x 版本到 Vite

最新推荐文章于 2024-07-31 21:25:15 发布

JavaScriptLiang

最新推荐文章于 2024-07-31 21:25:15 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端 webpack npm

本文链接：https://blog.csdn.net/weixin_41806099/article/details/128859661

版权

本文详细介绍了如何将一个 Vue v2.x 项目迁移到 Vite，包括创建新项目、配置 Vite、解决迁移过程中的各种问题和错误，以及对比 Vite 与 Vue CLI 的差异。内容涵盖了从简单的 Vite Demo 到实际项目迁移的全过程，旨在提供一个快速入门和问题排查的工具性教程。

摘要由CSDN通过智能技术生成

人生无常，大肠包小肠~

在接近年底的时候，有一个 Vue 项目，需要从中抽取 2 个模块出来。

然后想着新建项目，Vue CLI 也是学，Vite 也是学，于是哼次哼次用上了 Vite，结果开始了一路的 bug 挨打之旅……

警告：本文有 1.9w+ 字，35 张图片，10 个以上报错及其解决方式，1 个 Demo 和 1 个项目实例

一前言

Hello 小伙伴们早上、中午、下午、晚上、深夜好，我是 jsliang。

本次「迁移 Vue v2.x 项目到 Vite」将分为 2 个部分：

以一个简单 Demo，进行 Vite 快速入手（同时也是补充完善实例项目未解决的问题）
对实例项目迁移，对比 Vue CLI 和 Vite，以及 Vite 构建中碰到的问题。

本文更倾向于随手可查工具文，就好比之前写过的 Webpack 4 文章一样，它很快会石沉大海，但是我们将碰到的问题都反馈出来后，会让后面的人少跑弯路，这是很棒的事情。

小伙伴们如果碰到文章同样问题，想咨询当时细节，可 WX: Liang123Gogo。

感谢你的点赞和关注支持~

二简单 Demo：通过 Vite 打包 lib 仓库

下面开始保姆级教学，从 0 到 1 构建 Vite 项目，并处理打包问题。

前面及步骤略简单，小伙伴可选择跳读。

本小节的代码仓库：all-for-one/039-迁移 Vue v2.x 项目到 Vite/

2.1 步骤一：创建项目

安装 PNPM：npm i pnpm -g
通过 PNPM 创建 Vite + Vue 项目：pnpm create vite jsliang-plugin --template vue
- 创建 Vite 项目：pnpm create vite
- 创建 Vite + Vue TypeScript 项目：pnpm create vite jsliang-vue-plugin --template vue-ts

2.2 步骤二：初始化并运行

安装 node_modules：pnpm i
运行项目：pnpm run dev

如上图所示，打开 http://127.0.0.1:5173/ 即可。

效果如下图：

如果需要外部访问的话，需要在指令上加上 --host，即：

package.json

"scripts": {
-  "dev": "vite",
+  "dev": "vite --host",
  "build": "vite build",
  "preview": "vite preview"
},

2.3 步骤三：修改端口

一般 Vite + Vue 提供的端口是，像我这么靓的靓仔，肯定要 8888。

那就直接修改 vite.config.js 吧：

vite.config.js

为避免代码臃肿，第一次提的时候会写全代码，后面会写改动位置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
+  server: {
+    port: 8888,
+  },
})

这时候再启动 pnpm run dev，就能看到相应的端口有变更了。

2.4 步骤四：清场搞事

该做的事我们都做了，下面我们把 src 目录下所有代码删除，留下一个干净的 Vue 仓库。

并依据下图创建文件夹及其文件：

我们执行 pnpm run dev 的时候，代码的调用思路如上图所示。

先调用 index.html
再走 a/entry.js 或者 b/entry.js
接着走 a/a.vue 或者 b/b.vue
最后走 utils/c.js 这个公共模块

2.5 步骤五：补充代码

下面我们补充代码，使其最终展示如下：

首先，我们修改 index.html，使其提供了一个类 jsliang，其中有一个方法 addPlugin 提供注入 HTML 的能力。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script>
      class jsliang {
        addPlugin({ pluginName, pluginObj }) {
          const div = document.createElement('div');
          div.classList.add('container');
          div.innerHTML = `
            <div>插件 ${pluginName} 加载成功：</div>
          `;
          document.body.appendChild(div);
          document.body.appendChild(pluginObj());
        }
      }
      window.jsliang = new jsliang();
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/components/a/entry.js"></script>
    <script type="module" src="/src/components/b/entry.js"></script>
  </body>
</html>

然后，我们这里引用了 2 个入口，即 a/entry.js 和 b/entry.js（因为是测试的，所以直接在 pnpm run dev 模式上测试）

src/components/a/entry.js

// 这里引用了 a.vue 的代码
import A from './a.vue';

(function() {
  console.log('jsliang 插件加载成功');

  window.jsliang && window.jsliang.addPlugin && window.jsliang.addPlugin({
    pluginName: 'jsliang',
    pluginObj: A.methods.renderDOM,
  });
})();