插件安装和配置

在使用 Vite 2 升级 Vue-CLI 项目时，需要注意多个方面以确保项目的顺利迁移和正常运行。以下是一些关键点和解决方案，帮助你顺利完成这一过程。

安装 Vite 插件

首先，你需要安装 @vitejs/plugin-vue2 插件，这是 Vite 2 用来支持 Vue 2 的核心插件。

npm install @vitejs/plugin-vue2

配置 Vite 配置文件

在 vite.config.js 文件中配置插件和 Vue 2 选项。以下是一个基本的配置示例：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'es2015'
  }
})

集成 CSS 预处理器

Vite 2 默认不支持 CSS 预处理器，但你可以安装相应的插件来实现支持。例如，如果你使用 Sass，可以这样安装：

npm install sass

然后在 vite.config.js 中配置 CSS 预处理器选项：

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

export default defineConfig({
  plugins: [
    vue(),
    sass()
  ],
  ...
})

迁移路由配置

Vite 2 使用不同的路由系统，因此需要将现有的路由配置从 Vue-Router 迁移到 Vite-Router。首先安装 vite-plugin-pages 插件：

npm install vite-plugin-pages

然后在 vite.config.js 中配置路由选项：

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

export default defineConfig({
  plugins: [
    vue(),
    Pages()
  ],
  ...
})

更新依赖

确保所有依赖项都是最新的，特别是 Vite 和相关插件。你可以使用以下命令来更新依赖：

npm update vite vite-plugin-vue2 vite-plugin-sass vite-plugin-pages

移除 Vue-CLI 依赖

移除与 Vue-CLI 相关的依赖项，例如 vue-cli-plugin-babel。确保你的项目中不再包含这些依赖。

构建配置

根据项目的具体需求，调整 vite.config.js 中的构建选项。例如，你可以设置构建目标为 ES2015：

build: {
  target: 'es2015'
}

部署目标

确保你的构建目标与部署环境一致。Vite 2 默认为 ES2015，这可能与某些服务器环境不兼容。你可以在 vite.config.js 中设置正确的构建目标：

build: {
  target: 'es2015'
}

通过以上步骤，你应该能够顺利地将 Vue-CLI 项目迁移到 Vite 2。如果在迁移过程中遇到任何问题，可以参考 Vite 和 Vue-CLI 的官方文档，或者在社区寻求帮助。