Vite 使用笔记

Vite 使用笔记

What & Why

vite是下一代前端开发与构建工具。目的在取代webpack，有更加快速的构建速度和热更新速度。

Installation

yarn create @vitejs/app

按照命令行提示构建项目即可。

FeaturesIUse

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本URL。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

任何文件中都能访问这些变量，然后在生产环境中被静态替换。

.env文件

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载，mode可为production，development或其他自定义值。
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

VITE_SOME_KEY=123

利用Glob批量导入

我们可以使用vite提供的import.meta.glob从文件系统导入多个模块。

const modules = import.meta.glob('./src/*.js')
// vite转译为
const modules = {
	'./src/main.js': () => import('./src/main.js')
	...
}

匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

vite的glob函数是基于fast-glob实现的，简单的规则有：

1. (*) – 匹配一切除了斜杆(/)
2. (**) – 匹配所有目录
3. (?) – 匹配任何单个字符除了斜杆(/)
4. ([seq]) – 匹配任何字符在seq中出现的，如[01]即匹配0或1

配置开发服务器代理项

// vite.config.ts
server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567/foo',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        // 请求时将/api去掉，即直接请求http://jsonplaceholder.typicode.com
        // 而非http://jsonplaceholder.typicode.com/api
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      }
    }
  }

生产环境配置相对路径

// vite.config.ts
base: './'

Brief Q&A

依赖解析

import { createApp } from 'vue' 
import { createApp } from '@vue/runtime-dom' 

第一行裸模块导入，原生ES不支持，但vite将会执行预构建操作或重写为合法的URL。

当两行一起出现的时候（或在不同文件），项目很容易就会报错，可能是重复导入了模块的原因。

当出现报错时，可以用 --force 命令行选项启动开发服务器，或者手动删除 node_modules/.vite 目录。

Typescript 类型报错问题

import { Ref } from 'vue' // error
import type { Ref } from 'vue' // correct

当我们需要从别的文件中导入类型定义时，第一行的做法ts会提示“Ref”仅表示类型，但在此处却作为值使用。ts(2693)，而且不仅ts会报错，实际运行也会出现未在模块中找到Ref。

所以目前解决方案是第二条的写法，只要导入类型，就要在前面加入type。