概述

vite是一款前端构建工具，能够显著提升前端开发体验 Vite官网

浏览器支持

默认的构建目标是能支持原生 ESM 语法的 script 标签、原生 ESM 动态导入和 import.meta 的浏览器。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持

配置

让配置文件有类型提示的方法

方法一

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

方法二（常用）

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

提示原因：有类型标注

常用配置项

alias（别名）

function pathResolve(dir: string) {  
  return resolve(process.cwd(), '.', dir);  
}

[  
  {  
    find: 'vue-i18n',  
    replacement: 'vue-i18n/dist/vue-i18n.cjs.js',  
  },  
  // /@/xxxx => src/xxxx  
  {  
    find: /\/@\//,  
    replacement: pathResolve('src') + '/',  
  },  
  // /#/xxxx => types/xxxx  
  {  
    find: /\/#\//,  
    replacement: pathResolve('types') + '/',  
  },  
  {  
    find: /@\//,  
    replacement: pathResolve('src') + '/',  
  },  
  // /#/xxxx => types/xxxx  
  {  
    find: /#\//,  
    replacement: pathResolve('types') + '/',  
  },  
],

对应ts配置

json

"paths": {  
  "/@/*": ["src/*"],  
  "/#/*": ["types/*"],  
  "@/*": ["src/*"],  
  "#/*": ["types/*"]  
}

envPrefix（环境变量前缀）

类型： string | string[]
默认： VITE_ 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。

安全注意事项

envPrefix 不应被设置为空字符串 ''，这将暴露你所有的环境变量，导致敏感信息的意外泄漏。检测到配置为 '' 时 Vite 将会抛出错误.

css配置

modules

配置 CSS modules 的行为。选项将被传递给 postcss-modules。

interface CSSModulesOptions {
  scopeBehaviour?: 'global' | 'local'
  globalModulePaths?: RegExp[]
  generateScopedName?:
    | string
    | ((name: string, filename: string, css: string) => string)
  hashPrefix?: string
  /**
   * 默认：null
   */
  localsConvention?:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | null
}

localsConvention

修改生成的配置对象的key的展示形式（驼峰还是中划线形式）例子：

这里用中划线

使用样式

使用camelCase参数,css文件中会自动多出一个驼峰命名的css

scopeBehaviour

配置当前的模块化行为是模块化还是全局化，相当于在写vue时，在style标签上加上scope，这个参数默认值为local（有hash就是开启了模块化的一个标志，因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖）

建议默认，否则设为global后，样式会被覆盖

generateScopedName

“[name]_[local]_[hash:5]”

可以写成函数形式

hashPrefix

生成hash会更具你的类名+一些其他的字符串（文件名+它内部随机生成一个字符串）去进行生成，如果想要你生成hash史加的独一点，你可以配置hashPrefix，你配还的这个字符串会参与到最终的hash生成（hash：只要你的字符串有一个字不一样，那么生成的hash就完全不一样，但是只要你的字符串完全一样，生成的hash就会一样）

globalModulePaths

代表你不想参与到css模块化的路径就比如说有些css文件引入了ant的css，你不想让他模块化（防止样式被覆盖），你就将这个配置为这个css文件的路径

preprocessorOptions

指定传递给 CSS 预处理器的选项。文件扩展名用作选项的键。每个预处理器支持的选项可以在它们各自的文档中找到

如何配置

例如：配置math

设置为always

不设置

全局变量

选项参考

https://lesscss.org/usage/#less-options

查看选项

lessc编译时传入选项

devSourcemap

设置为true后，可以看到当前样式所在的css文件

原理：在源代码中可以看到这一串，相当于把你的源代码copy过来了，因此可以找到

postcss

这是一个用 JavaScript 工具和插件转换 CSS 代码的工具

配置位置

写在vite的css中
直接新建一个postcss.config.js，在里面配置

安装插件

pnpm i postcss-preset-env

使用插件

开头的全局变量定义在css文件中

使用时需要这样引入，否则可能会不生效(注意，这个方法可能在后续被移除)

例子1

css

例子2

css

环境变量和模式

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量

// 应用运行的模式。
import.meta.env.MODE: {string}
// 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.BASE_URL: {string}
// 应用是否运行在生产环境。
import.meta.env.PROD: {boolean}
// 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.DEV: {boolean}
// 应用是否运行在 server 上。
import.meta.env.SSR: {boolean}

生产环境替换

在生产环境中，这些环境变量会在构建时被静态替换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如，动态 key 取值 import.meta.env[key] 是无效的。

它还将替换出现在 JavaScript 和 Vue 模板中的字符串。这本应是非常少见的，但也可能是不小心为之的。在这种情况下你可能会看到类似 Missing Semicolon 或 Unexpected token 等错误，例如当 "process.env``.NODE_ENV" 被替换为 ""development": "。有一些方法可以避免这个问题：

对于 JavaScript 字符串，你可以使用 unicode 零宽度空格来分割这个字符串，例如： 'import.meta\u200b.env.MODE'。
对于 Vue 模板或其他编译到 JavaScript 字符串的 HTML，你可以使用 <wbr> 标签，例如：import.meta.<wbr>env.MODE。

`.env` 文件

Vite 使用 dotenv 从的环境目录中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

例子：
"dev": "vite"，此时的mode为默认的development
"build": "vite --mode=dev"，此时的mode为dev，对应文件为development
"build": "vite build",此时的mode为production

读取环境变量

服务端获取环境（例如配置文件中）

vite给我们提供了一些补偿措施:我们可以调用vite的loadEnv来手动确认env文件、

// 读取所有配置，客户端只会读取到envPrefix指定的变量
const myEnv = loadEnv(mode, process.cwd(),"");

// 例子
// 读取对应前缀的配置（第三个参数传入需要的前缀）
// 环境文件
ENV_APP_KEY=123456
VITE_APP_KEY=123456
// 当不修改配置文件中的变量前缀时
// 不传入第三个参数，服务端默认获取VITE_开头的变量，客户端，默认获取VITE_开头的变量
const myEnv = loadEnv(mode, process.cwd());

// 传入第三个参数，服务端获取了ENV_开头的环境变量，客户端，默认获取VITE_开头的变量
const myEnv = loadEnv(mode, process.cwd(),'ENV_');

// 当修改配置文件中的变量前缀为ENV_时
// vite.config.ts
envPrefix:"ENV_"

// 传入第三个参数，服务端获取了ENV_开头的环境变量，客户端，默认获取ENV_开头的变量
const myEnv = loadEnv(mode, process.cwd(),'ENV_');

第三个参数表示需要读取的环境变量的前缀，类型可以为字符串，也可以为字符串数组如果传入空字符串，则会读取到process.env和.env文件（包括对应mode的环境文件）中的内容

环境加载优先级

一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

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

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

安全注意事项

想自定义 env 变量的前缀，请参阅 envPrefix。

.env.*.local 文件应是本地的，可以包含敏感变量。你应该将 .local 添加到你的 .gitignore 中，以避免它们被 git 检入。
由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，VITE_* 变量应该不包含任何敏感信息。

vite中的环境变量处理

vite内置了dotenv这个第三方库

dotenv会自动读取.env文件，并解析这个文件中的对应环境变量―并将其注入到process对象下(但是vite考虑到和其他配置的一些冲突问题，他不会直接注入到process对象下)

vite预加载

在处理的过程中如果说看到了有非绝对路径或者相对路径的引用，他则会尝试开启路径补全

开发 yarn dev --→>开发(每次依赖预构建所重新构建的相对路径都是正确的)

生产 vite会全权交给一个叫做rollup的库去完成生产环境的打包

依赖预构建

由于有些包是用commonjs的语法导出的（module.export），有些包用的是用ES6的语法导出的，这就导致无法识别导入导出，因此，vite做了一步依赖预构建：

首先vite会找到对应的依赖，然后调用esbui1d(对js语法进行处理的一个库)，将其他规范的代码转换成esmodule规范，然后放到当前目最下的node_modules/ .vite/deps，同时对esmodule规范的各个模块进行统─集成

解决了3个问题

1、不同的第三方包会有不同的导出格式(这个是vite没法约束人家的事情) 2、对路径的处理上可以直接使用.vite/deps，方便路径重写 3、网络多包传输的性能问题，有了依赖预构建以后无论他有多少的额外export和import,vite都会尽可能的将他们进行集成最后只生成一个或者几个模块测试如果不构建包发现如果不构建，会将lodash-es依赖的所有包都加载进来，影响网络传输

为什么vite.config. js可以书写成esmodule的形式

因为vite他在读取这个vite.config. js的时候会率先node去解析文件语法，如果发现你是esmodule规范会直接将你的esmodule规范进行替换变成commonjs规范

配置项

官网配置项

一些知识

postcss

这是一个用 JavaScript 工具和插件转换 CSS 代码的工具

工作流程

配置

安装

pnpm i postcss-cli postcss -D
pnpm i postcss-preset-env

插件

unplugin-vue-setup-extend-plus

unplugin-vue-setup-extend-plus - npm

使 vue 脚本设置语法支持 name 属性

support auto expose
support name
support inheritAttrs
precise breakpoints
Expanded the function of automatic name generation

官网：

https://github.com/chenxch/unplugin-vue-setup-extend-plus#readme

main.ts

import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
plugins: [  
    vue(),  
    Components({  
        resolvers: [VantResolver()],  
    }),  
    vueSetupExtend({})  
],

@vitejs/plugin-legacy

Vite 默认的浏览器支持基线是 Native ESM、Native ESM dynamic import 和 import.meta .此插件为旧版浏览器提供支持，这些浏览器在为生产环境构建时不支持这些功能。

npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

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

概述 ​

浏览器支持 ​

配置 ​

让配置文件有类型提示的方法 ​

方法一 ​

方法二（常用） ​

常用配置项 ​

alias（别名） ​

envPrefix（环境变量前缀） ​

css配置 ​

modules ​

localsConvention ​

scopeBehaviour ​

generateScopedName ​

hashPrefix ​

globalModulePaths ​

preprocessorOptions ​

如何配置 ​

devSourcemap ​

postcss ​

配置位置 ​

安装插件 ​

使用插件 ​

开头的全局变量定义在css文件中 ​

例子1 ​

例子2 ​

环境变量和模式 ​

环境变量 ​

生产环境替换 ​

.env 文件 ​

读取环境变量 ​

服务端获取环境（例如配置文件中） ​

vite中的环境变量处理 ​

vite预加载 ​

依赖预构建 ​

解决了3个问题 ​

为什么vite.config. js可以书写成esmodule的形式 ​

配置项 ​

一些知识 ​

postcss ​

工作流程 ​

配置 ​

安装 ​

插件 ​

unplugin-vue-setup-extend-plus ​

@vitejs/plugin-legacy ​

概述

浏览器支持

配置

让配置文件有类型提示的方法

方法一

方法二（常用）

常用配置项

alias（别名）

envPrefix（环境变量前缀）

css配置

modules

localsConvention

scopeBehaviour

generateScopedName

hashPrefix

globalModulePaths

preprocessorOptions

如何配置

devSourcemap

postcss

配置位置

安装插件

使用插件

开头的全局变量定义在css文件中

例子1

例子2

环境变量和模式

环境变量

生产环境替换

`.env` 文件

读取环境变量

服务端获取环境（例如配置文件中）

vite中的环境变量处理

vite预加载

依赖预构建

解决了3个问题

为什么vite.config. js可以书写成esmodule的形式

配置项

一些知识

postcss

工作流程

配置

安装

插件

unplugin-vue-setup-extend-plus

@vitejs/plugin-legacy