vite.config.js 的一些常用配置你知道吗

前言

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

介绍

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

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

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

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

配置

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

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

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

js 复制代码

// 部署生产环境和开发环境下的URL。
// 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.xxx/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx/admin/，则设置 baseUrl 为 /admin/。
base: VITE_APP_ENV === 'production' ? '/' : '/',

plugins

配置所需的插件数组

js 复制代码

plugins: [
    vue(),
    // ...
    AutoImport({
      // imports: ['vue', 'vue-router'],
      dts: "./auto-imports.d.ts",
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],

server

运行服务的配置

js 复制代码

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

js 复制代码

resolve: {
    // 定义项目路径别名，这样可以在引入文件时，以属性值为起点。
    // 例如你 import 导入使用的时候 from 的路径就可以更改成 `@/view/home `
    alias: {
      '@': resolve(__dirname, 'src'),
    },
    // import 导入时想要省略的扩展名列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  }

build

打包配置

js 复制代码

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
  }