前端开发工具的新选择：vue-cli迁移vite2实践总结

前言

两周前（202.02.17），vite2.0 发布了，作为使用了浏览器原生 ESM 为下一代前端工具，vite 2.0 相较于 1.0 更加成熟。在此之前笔者就开始关注这类「新型」的前端工具。这次趁着 vite 2.0 发布，也成功将一个基于 vue-cli(-service) 的老项目迁移到了 vite 2.0 上。在此，将迁移过程中的心得体会与大家分享，希望能帮助到大家。

迁移步骤

1. 安装 vite

npm install -g vite

2. 初始化 vite 项目

vite create my-vite-project

3. 将 vue-cli 项目的文件复制到 vite 项目中

cp -r my-vue-cli-project/* my-vite-project/

4. 修改 vite 项目的 package.json 文件

{
  "name": "my-vite-project",
  "version": "1.0.0",
  "description": "A Vite project",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vite": "^2.0.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0"
  }
}

5. 安装 vite 插件

npm install @vitejs/plugin-vue

6. 在 vite 项目的 vue.config.js 文件中配置插件

export default {
  plugins: [vue()]
}

7. 运行 vite 项目

npm run dev

注意事项

在迁移过程中，需要注意以下几点：

• vite 2.0 不再支持 vue-cli 的一些特性，例如：
  • 内联模板
  • CSS 预处理器
  • 单文件组件
• 需要使用 vite 插件来支持这些特性。
• vite 2.0 的构建速度比 vue-cli 快得多。
• vite 2.0 具有更好的开发体验，例如：
  • 热重载更快
  • 代码保存后立即更新浏览器
  • 更详细的错误信息

总结

总体而言，vite 2.0 是一个非常优秀的现代前端开发工具。它具有更快的构建速度、更好的开发体验和更丰富的功能。如果您正在寻找一款新的前端开发工具，那么 vite 2.0 绝对是您的最佳选择。