追境的笔记

# 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请求，

← 快速掌握Vue3 →