迁移 Vue v2.x 版本到 Vite

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

人生无常,大肠包小肠~

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

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

45d9125c29fb822b5eec6a1cba639668.png

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

一 前言

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

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

  1. 以一个简单 Demo,进行 Vite 快速入手(同时也是补充完善实例项目未解决的问题)

  2. 对实例项目迁移,对比 Vue CLI 和 Vite,以及 Vite 构建中碰到的问题。

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

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

206706facc7ffbc939cba7e2752f0ade.jpeg

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

二 简单 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

ad41f4a067e67d9f448d192f5dfbfa1a.png

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

效果如下图:

670a171cf67cc34f19890b6f89067016.png

如果需要外部访问的话,需要在指令上加上 --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 仓库。

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

42944832976bfc7035115daeb2eddc00.png

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

  1. 先调用 index.html

  2. 再走 a/entry.js 或者 b/entry.js

  3. 接着走 a/a.vue 或者 b/b.vue

  4. 最后走 utils/c.js 这个公共模块

2.5 步骤五:补充代码

下面我们补充代码,使其最终展示如下:

c76c623241dab6333047fb2630c48426.png

首先,我们修改 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.jsb/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,
  });
})();

src/components/a/a.vue


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值