【Vite】快速入门及其配置

概述

Vite是前端构建工具。vite

相较于webpack,vite采用了不同的运行方式:

  • 开发时,并不对代码打包,而是直接采用ESM的方式来运行项目
  • 在项目打包部署时,使用 rollup 对项目进行打包
  • 除了速度外,vite使用起来也更加方便

默认项目源码目录就是根目录,而不像 webpack 那样是 src 目录。

我们可以初始化一个工程:

sh 复制代码
npm init 
npm i vite -D
html 复制代码
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>Document</title>
  <script
    type="module"
    src=./index.js
  ></script>
</head>

<body>
  <h1>Vite demo</h1>
</body>

</html>
js 复制代码
document.body.insertAdjacentHTML('beforeend', '<h1>Hello Vite!</h1>')

然后执行 :

sh 复制代码
npx vite 

启动项目,并且自动支持热更新和启动服务器。

npx vite build进行项目打包,且使用 的是 ESM。但是 ESM 必须通过 url的方式进行加载,也就是说,使用打包后的 html 不能运行项目,必须使用 http / https 才可以,所以需要通过服务器打开项目。

但是 live server 也不可以,live server 的根目录配置有问题,默认配置的根目录是项目目录,我们还需要改为 dist 目录。

所以要么通过将 dist 放在服务器运行,要么 执行 npx vite preview 运行。

vite是开发服务器,并不对项目进行打包;而vite preview是打包后的预览服务器。

配置

一般的 style,css(sass, less 等),图片处理 等一系列常用配置 vite 已经内置了,无需我们手动配置。

要想为传统浏览器提供支持(es6 -> es5),可以按下面这样使用官方插件 @vitejs/plugin-legacy:

sh 复制代码
$ npm add -D @vitejs/plugin-legacy
js 复制代码
// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

legacy 在打包时需要插件 terser(用于压缩代码),所以还需要装:

sh 复制代码
npm i terser -D 
相关推荐
可子是我的小猫7 分钟前
【JS】模块(一)
javascript
跟橙姐学代码15 分钟前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_16 分钟前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13719 分钟前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌19 分钟前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_22 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
草履虫建模26 分钟前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
云枫晖29 分钟前
JS核心知识-数据转换
前端·javascript
xuyanzhuqing29 分钟前
代码共享方案-多仓库合并单仓库
前端
RaidenLiu31 分钟前
Riverpod 3:重建控制的实践与性能优化指南
前端·flutter