前言

当我们进行前端开发项目的时候都需要一些构建工具，像 Webpack、Rollup、Snowpack、Vite 等构建工具，而在 Vue3 的官方文档中的创建应用例子使用了 Vite，那么问题来了，为什么在 Vue3 中大多数都会推荐使用 Vite 呢？

介绍

Vite是前端的一种构建工具，有着服务启动快、热更新迅速的特点，显著提升前端开发体验。

在项目一开始启动时，Vite 会将应用中的模块区分为 依赖 和 源码 两类。

依赖 ，使用 esbuild 进行预构建依赖，底层使用了go，大量使用了并行操作，可以充分利用CPU资源；当我们 import 导入的时候，会将所需要的内部模块全部打包起来，这样请求的时候就只需要发送一次请求就可以了。源码，Vite 以 ESM 方式提供源码，ESM的对外接口只是一种静态定义，为编译时加载，遇到模块加载命令import，就会生成一个只读引用。等脚本真正执行时，再根据这个只读引用，到被加载的那个模块内取值。由于ESM编译时就能确定模块的依赖关系，因此能够只包含要运行的代码，可以显著减少文件体积，降低浏览器压力。

从这两方面加快开发构建时的速度。

配置

当我们利用 <code>npm init vue@latest 命令创建 vue 项目， 完成后会自动生成一个 vite.config.js 文件，该文件初始状态如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [ //需要用到的插件数组

vue(),

],

resolve: {

alias: { // 定义项目路径别名，这样可以在引入文件时，以属性值为起点

'@': fileURLToPath(new URL('./src', import.meta.url))

}

}

})

接下来就挑选几个比较常用的配置来介绍下。

base

开发或生产环境服务的公共基础路径。

// 部署生产环境和开发环境下的URL。

// 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上

// 例如 https://www.xxx/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx/admin/，则设置 baseUrl 为 /admin/。

base: VITE_APP_ENV === 'production' ? '/' : '/',

plugins

配置所需的插件数组

plugins: [

vue(),

// ...

AutoImport({

// imports: ['vue', 'vue-router'],

dts: "./auto-imports.d.ts",

resolvers: [ElementPlusResolver()],

}),

Components({

resolvers: [ElementPlusResolver()],

}),

],

server

运行服务的配置

server: {

host: 'localhost', // 启动后浏览器窗口输入地址就可以进行访问

port: 8080, // 端口号

open: true, //是否自动打开浏览器

cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源

https: false, //是否支持http2 如果配置成true 会打开https://localhost:8080;

strictPort: true, //严格的端口号，如果true，端口号被占用时会直接退出

hmr: true, // 开启热更新

proxy: { // 反向代理配置

'/api': {

// 配置接口调用目标地址

target: 'https://www.xxxx.com',

// 当进行代理时，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

changeOrigin: true,

// 替换target中的请求地址，请求时以 /api 开头

rewrite: path => path.replace(/^\/api/, ''),

}

}

},

resolve

resolve: {

// 定义项目路径别名，这样可以在引入文件时，以属性值为起点。

// 例如你 import 导入使用的时候 from 的路径就可以更改成 `@/view/home `

alias: {

'@': resolve(__dirname, 'src'),

},

// import 导入时想要省略的扩展名列表

extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],

}

build

打包配置

build: {

// 最终构建的浏览器兼容目标，类型：string | string[]

target: '',

//指定输出路径

outDir: "dist",

//生成静态资源的存放的路径

assetsDir: "assets",

// 设置资源阈值，小于该值将内联为 base64 编码，避免额外的 http 请求

assetsInlineLimit: 4096,

//启用/禁用 CSS 代码拆分，如果有设置build.lib，build.cssCodeSplit 会默认为 false，

//false 的话会将项目中的所以 css 提取到一个 css 文件中

cssCodeSplit: true,

// 构建后是否生成 source map 文件, boolean | 'inline' | 'hidden'

sourcemap: false,

//自定义底层的 Rollup 打包配置

rollupOptions: {

// 可以配置多个，表示多入口

input: {

index: resolve(__dirname, "index.html")

},

output: {

chunkFileNames: 'static/js/[name]-[hash].js',

entryFileNames: "static/js/[name]-[hash].js",

assetFileNames: "static/[ext]/name-[hash].[ext]"

}

},

// 禁用将构建后的文件写入磁盘

write: false,

//默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。

emptyOutDir: true,

//chunk 大小警告的限制

chunkSizeWarningLimit: 500

}