# vue3 快速掌握vite

  • 浏览器原生module,减少了编译过程,速度更快
  • 可以直接引入TS文件,不做类型推断,只是做ts编译。使用esbuild做ts转换js,因为esbuild不携带类型信息。
  • rollup构建
  • vite.config.js

# CSS / JSON Importing

  • 可以直接引入json 和css
  • json默认导出object
  • css啥也不导出,除非是以.module.css结束
  • css 和json 都支持热更新

# Asset URL Handling

  • 可以是用绝对路径(基于项目根目录) 或者相对路径(根据文件系统)
  • 项目中所有的图片,字体,媒体都会被自动检测并包含到assets下,打包的时候活打包到dist/_assets下,
  • 未引用的不会被打包,小于4kb会打包成base64
  • 可以用assetsInclude进行配置

TIP

img标签引入的时候 ./ 路径不能少 style标签里引入可以省略 ./ 直接引入的文件需要放到public下, 而且不需要带 任何路径前缀,直接写文件名 动态路径可以配合 import.meta.env.BASE_URL使用

# PostCSS

vite默认使用 PostCSS,在项目根目录直接新增 postcss.config.js就可以

# CSS Modules

如果想使用css modules,那么就不要配置PostCSS,直接在.vue文件中写

或者直接把css文件 命名为 xxx.module.css

# css 预处理器

https://github.com/vitejs/vite/tree/master/#css-pre-processors

# JSX

.jsx 和 .tsx也是支持的,jsx也是用esbuild来编译的 默认的jsx配置可以直接在vue3中用,目前jsx不支持热更新

# Config File

可以创建 vite.config.js 或者 vite.config.ts来配置项目 https://github.com/vitejs/vite/blob/master/src/node/config.ts

# Dev Server Proxy

// vite.config.js 使用 基于http-proxy的 koa-proxies :https://github.com/http-party/node-http-proxy#options export default { proxy: { // string shorthand '/foo': 'http://localhost:4567/foo', // with options '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: path => path.replace(/^/api/, '') } } }

# Production Build

https://github.com/vitejs/vite/blob/master/src/node/build/index.ts

# Modes and Environment Variables

  1. development is used by vite and vite serve
  2. production is used by vite build 可以使用--mode 显示指定环境,比如 vite build --mode development .env # loaded in all cases .env.local # loaded in all cases, ignored by git .env.[mode] # only loaded in specified env mode .env.[mode].local # only loaded in specified env mode, ignored by git 仅仅以 VITE_开始的变量被支持

# build配置

https://github.com/vitejs/vite/blob/master/src/node/build/index.ts

# How and Why

  1. 使用了原生es module,每个import都进行http请求,