直击“痛点”，大揭秘：Vue-cli迁移到Vite（Vue3 + TSX + Antd-Vue）实操攻略

将 Vue-cli 项目迁移到 Vite 的终极指南

简介

随着 Vue 3 的蓬勃发展，开发者们的目光逐渐转向了 Vue 3 + Vite 开发模式。与传统的 Vue-cli 开发模式相比，Vue 3 + Vite 拥有更快的启动速度、更小的构建体积和更全面的模块化支持。因此，将 Vue-cli 创建的项目迁移到 Vite 不失为一个明智之举。

迁移步骤

1. 安装 Vite

npm install vite

2. 创建 Vite 项目

mkdir vite-vue3-antd-vue
cd vite-vue3-antd-vue
npm init vite@latest

3. 复制文件

将 Vue-cli 项目中的以下文件复制到 Vite 项目中：

• package.json
• src 目录
• public 目录
• .gitignore 文件

4. 修改 package.json 文件

在 package.json 文件中，将 "build" 字段修改为：

"build": {
  "rollupOptions": {
    "input": {
      "main": "./src/main.jsx"
    },
    "output": {
      "format": "es",
      "file": "./dist/main.js"
    }
  }
}

5. 安装依赖项

npm install

6. 启动 Vite 项目

npm run dev

7. 潜在问题

在迁移过程中，你可能会遇到一些问题，常见的包括：

• Antd-Vue 组件渲染异常

解决方法：将 Antd-Vue 组件的样式文件从 node_modules/antd-vue/dist/antd-vue.css 复制到 public 目录，并在 index.html 文件中引入该样式文件。

• 路由无法正常工作

解决方法：在 main.jsx 文件中，将 import { createRouter, createWebHistory } from 'vue-router' 修改为 import { createRouter, createWebHistory } from '@vue-router/vue3'。

结论

遵循上述步骤，即可将你的 Vue-cli 项目无缝迁移到 Vite。通过迁移，你将受益于 Vite 带来的更快启动速度、更小构建体积和更完善的模块化支持。希望这篇指南能为你提供帮助。

常见问题解答

1. Vite 与 Vue-cli 有何不同？

Vite 是一种现代化的构建工具，它采用基于原生 ES 模块的开发模式，具有更快的启动速度和更小的构建体积。而 Vue-cli 是一种 CLI 工具，它提供了一个用于创建 Vue 项目的脚手架。

2. 为什么需要迁移到 Vite？

迁移到 Vite 可以显著提升开发体验，包括更快的启动速度、更小的构建体积和更完善的模块化支持。

3. 迁移过程中遇到 Antd-Vue 组件渲染异常怎么办？

请将 Antd-Vue 组件的样式文件复制到 public 目录，并在 index.html 文件中引入该样式文件。

4. 迁移过程中遇到路由无法正常工作怎么办？

请在 main.jsx 文件中将 import { createRouter, createWebHistory } from 'vue-router' 修改为 import { createRouter, createWebHistory } from '@vue-router/vue3'。

5. 迁移后，如何提高 Vite项目的性能？

可以通过启用代码分割、使用缓存和优化构建配置等方式来提高 Vite项目的性能。