这是我参与「第四届青训营 」笔记创作活动的第5天

本次大项目开发选择了vite作为前端构建工具，具体的项目技术选型可参考前一篇笔记。在项目中使用vite时遇到的问题及解决方案记录于本篇笔记

vite简介

首先，简单的介绍一下vite。vite是由vue官方团队开发的前端构建工具。Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
• 一套构建指令，它使用 Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。参考网址：vitejs.cn/guide/

作为前端工程化的必要条件，构建工具不可缺少，与当前流行程度最高的构建工具Webpack比起来，vite更加的年轻与轻量。

vite使用过程中的问题

vite相比于webpack构建速度更快，同时也带来了在使用中的一些不同。下面就具体遇到的问题展开来说。

vite的别名设置

和webpack一样，vite也支持使用@符进行别名设置，但是二者的设置是不一样的。

vite的别名设置的例子：在vite.config.ts中添加如下的代码，

……
//在webpack中使用require是cmd方案
//在vite中使用的是ES6 module方案
import path from 'path'

export default defineConfig({
  resolve: {
  ……，
    alias: [
      {
        find: "@",
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  },
  ……
  })

同时，在路由模块中引用组件时需要注意，不可以使用@符作为别名使用，

//在webpack中可以使用，vite中会报错
const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/home')

//vite中的使用方式，直接书写路径
const Layout = () => import("../views/Layout.vue");
const Home = () => import("../views/home/index.vue");

总结

vite构建工具是第一次进行实际使用，在使用的过程中遇到了一些问题，这些问题的出现是必然的。它和旧的打包工具webpack是一定有区别的。实际上，在学习新的工具时遇到问题并解决问题，正是学习这个工具的过程。这篇笔记，实际回头来看，就是解决了简单的一个路径名的小问题。但是，在程序报错时却需要画一些时间解决。希望这篇笔记可以给遇到同样问题的朋友一些参考。