记录Webpack构建的Vue3项目改成Vite构建的方式中遇到的坑

前言

随着Vue3的发布，Vite也逐渐成为前端开发领域的新宠。Vite是一款非常高效的前端构建工具，它可以极大地提高项目的构建速度。因此，许多开发人员都开始考虑将Webpack构建的项目迁移到Vite。

迁移步骤

1. 安装Vite

npm install -D vite

2. 创建Vite配置文件

在项目根目录下创建一个名为vite.config.js的文件，并添加以下内容：

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

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

3. 修改项目入口文件

将项目的入口文件main.js修改为如下内容：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

4. 运行Vite

在项目根目录下运行以下命令：

npm run dev

遇到的坑

1. CSS样式无法正常加载

在将项目迁移到Vite后，发现CSS样式无法正常加载。这是因为Vite默认不会将CSS文件打包到最终的构建文件中。要解决这个问题，需要在vite.config.js文件中添加以下配置：

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

2. 图片无法正常加载

在将项目迁移到Vite后，发现图片无法正常加载。这是因为Vite默认不会将图片文件打包到最终的构建文件中。要解决这个问题，需要在vite.config.js文件中添加以下配置：

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

3. 字体图标无法正常加载

在将项目迁移到Vite后，发现字体图标无法正常加载。这是因为Vite默认不会将字体图标文件打包到最终的构建文件中。要解决这个问题，需要在vite.config.js文件中添加以下配置：

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

4. TypeScript类型检查报错

在将项目迁移到Vite后，发现TypeScript类型检查报错。这是因为Vite默认不会对TypeScript代码进行类型检查。要解决这个问题，需要在vite.config.js文件中添加以下配置：

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

5. Vite与Webpack的兼容性问题

在将项目迁移到Vite后，发现Vite与Webpack的兼容性存在一些问题。例如，Vite无法识别Webpack的配置文件，因此需要手动配置Vite的构建选项。此外，Vite的某些插件与Webpack的插件不兼容，因此需要重新选择合适的插件。

总结

通过上面的步骤，我们已经将Webpack构建的Vue3项目成功迁移到了Vite。在迁移过程中，我们遇到了各种各样的坑，但最终都一一克服了。希望这篇博文能够帮助到其他想要将项目迁移到Vite的开发者。