Vite是 2020 年推出的新前端构建工具。
因为开发者是 Evan You，Vue.js 的创建者，所以有时会被误解为它是一个 Vue.js 工具，但有很多流行的工具可用，从纯 JavaScript (vanilla JS) 到 Vue.js、React 和Svelte 是一个多功能工具，可以在各种环境中使用.
Vite特点及基本机制
在Web开发中，手动编写所有JavaScript文件并从HTML文件中一一读取它们已经变得不那么常见了。您可能会使用某种工具进行“构建”，它组合并压缩划分的模块。使用需要编译（转译）的语言也变得很常见，例如 TypeScript 和 Sass。
Vite是本次构建中使用的工具。我们简单介绍一下它的特点。
① 使用现代浏览器提供的机制（ES modules和 Dynamic import/ES模块和动态导入）可以快速启动/更新
Vite最大的优点是速度。运行时，webpack 等传统工具会编译并组合项目中的所有文件以创建一个称为捆绑包的程序。虽然有效率化的机制，但一般来说，项目越大，处理时间就越长。
另一方面，Vite采用了一种称为“ES modules”的模块划分机制，在必要时只编译必要的文件并将其发送到浏览器。这种机制甚至允许大型项目立即启动和更新（大多数情况下几百毫秒）。
ES 模块可用于 IE11 以外的大多数浏览器。通过使用标准函数，您可以提高速度，而无需引入复杂的机制。
② TypeScript、Vue/React等库无需配置即可立即使用
Vite的主要理念是“开箱即用”。 Vite 对于大多数一般开发来说不需要任何麻烦的设置。您可以在几乎相同的时间内使用 Vue.js 和 TypeScript 开始开发一切内容，从简单的纯 JavaScript 网页到成熟的 Web 应用程序。
另外它支持热重载（开发过程中文件更改时检测差异并重新加载浏览器的功能）。
基本用法
Vite 非常容易使用。大部分时候都是创建项目时引入使用（Vite + TypeScript + Vue / Vite + TypeScript + Vue），也可以不使用框架构建项目.
参考 Vite
自定义设置
Vite的理念是“开箱即用”。您只需选择模板即可获得完全实用的开发环境。
但在实际的产品开发和业务使用中，往往需要进行设置的定制。在这种情况下，您可以通过在项目的根目录中创建文件来自定义设置vite.config.js（如果是 TypeScript 项目）。vite.config.ts
vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
// 其他配置增加
})可配置的项目在官方的 《配置Vite 》中列出。由于设置比较多，我们先介绍一些常用的基本设置。
server.port：开发时避免端口号冲突
Vite的开发服务器3000默认使用端口号。如果一个端口正在使用，则会自动使用另一个空闲端口，但为了避免不必要的混乱，如果您同时处理多个项目，最好确定端口号。
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 8080
}
})如果您只想暂时更改它，npm run dev -- --port 1111也可以使用命令行选项指定它。
配置文件相对路径
Vite/在加载脚本、图片等资源时使用绝对URL开头。如果部署目标不是 Web 服务器的根目录，会导致路径错误
可以指定任何 URL，但base像下面的示例中那样./指定会更好、更灵活。
import { defineConfig } from 'vite'
export default defineConfig({
base: './'
})resolve.alias：允许您使用导入路径@components/中的别名
使用 Vue CLI 创建的项目能够使用以 开头的路径import HelloWorld from '@/components/HelloWorld.vue'，例如默认情况下。@/要在 Vite 中使用相同的功能，resolve.alias您需要配置设置。
在vue-ts模板创建的项目的vite.config.ts中添加别名设置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@/': path.join(__dirname, './src/')
}
}
})
评论 (0)