Vue CLI 到 Vite：一次痛快的迁移！

2023-12-15 01:40:21

在 Vue 开发领域，Vue CLI 和 Vite 都是非常流行的构建工具。随着 Vite 的不断发展和优化，越来越多的开发者开始考虑将其项目从 Vue CLI 迁移到 Vite。本文将详细介绍如何从 Vue CLI 迁移到 Vite，并提供一些实用的解决方案和建议。

为什么要从 Vue CLI 迁移到 Vite？

闪电般的构建速度

Vite 的最大亮点之一是其惊人的构建速度。相较于 Vue CLI，Vite 的构建速度可以达到原来的数十倍，这对于大型项目来说，无疑是一个巨大的优势。

热重载的流畅体验

Vite 支持热重载，这意味着当你修改代码时，浏览器会自动更新，无需你手动刷新页面。这大大提高了开发效率，让你能够更专注于编写代码。

开箱即用的支持

Vite 默认支持多种流行的前端工具和库，如 TypeScript、Sass 和 Less，无需额外安装插件或配置即可使用。

更加灵活的配置

Vite 的配置文件非常灵活，你可以根据自己的项目需求进行定制，从而更好地控制构建过程。

从 Vue CLI 迁移到 Vite 的步骤

1. 安装 Vite

首先，你需要全局安装 Vite：

npm install -g vite

2. 创建新的 Vite 项目

使用 Vite 创建一个新的项目：

vite create my-project

按照提示选择你需要的插件和配置。

3. 将现有项目迁移到 Vite

进入你的现有项目目录，安装 Vite 并进行必要的配置更改：

cd my-project
npm install vite

在项目根目录下的 package.json 文件中，找到 scripts 对象，将 vue-cli-service serve 替换为 vite：

{
  "scripts": {
    "serve": "vite"
  }
}

4. 修改项目配置文件

根据你的项目需求，可能需要修改一些配置文件。例如，如果你使用的是 Sass 或 Less，确保安装相应的 Vite 插件：

npm install vite-plugin-style-import --save-dev

然后在 vite.config.js 中配置插件：

import styleImport from 'vite-plugin-style-import';

export default {
  plugins: [
    styleImport({
      libs: [
        {
          libraryName: 'your-library',
          esModule: true,
          resolveStyle: (name) => {
            return `your-library/lib/${name}.css`;
          },
        },
      ],
    }),
  ],
};