Vite 学习笔记

什么是Vite？

github：https://github.com/vitejs/vite

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

它主要具有以下特点：

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

Vite 相比 Webpack

Vite 打包速度更快，打包后体积更小。

使用Vite创建、运行一个Vue3项目

// 创建项目
npm init vite-app 项目名称
// 进入项目根目录
cd 项目名称
// 安装项目依赖
npm install
// 运行项目
npm run dev
// 使用 vite 打包项目
npm run build

关于 Vite/Vue CLI 打包后资源文件路径问题

Vite 和 Vue CLI 在打包后，index.html寻找资源文件的默认路径都是根路径'/'。
这就有可能出现index.html找不到资源文件，页面什么都不显示的情况。

解决方法：在配置文件内将默认路径设为相对路径./

• Vue CLI 需要在项目根目录创建 vue.config.js 文件。

module.exports = {
    publicPath: './'
}

• Vite 需要在项目根目录创建 vite.config.js 文件。

module.exports = {
    base: './'
}