Vite配置深度解析：从开发到构建的完整配置指南

在使用 Vite 构建前端项目时，vite.config.js文件是必不可少的一部分。这个文件用于配置 Vite 的各种选项，包括开发服务器、构建设置、插件等。本文将详细介绍vite.config.js文件中常见的配置项及其用途。

一：基本配置

首先，我们来看一下 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({   base: '/',//解决js，css路径错误问题   plugins: [       vue(),   ],   resolve: {       alias: {           '@': fileURLToPath(new URL('./src', import.meta.url))       }   },   server: {   }})

1.1 base

设置应用的基本路径。应用打包后访问的路径，这个文件涉及到css、js等文件的路径问题。

假设你的应用部署在https://example.com/applet/，而不是服务器的根目录https://example.com/。你需要将 base 设置为/applet/，这样构建后的资源路径会变成https://example.com/applet/xxx/xxx

我们可以设置相对路径，而不需要设置具体的项目路径：

export default defineConfig({   base: process.env.NODE_ENV === 'production' ? './' : '/',//解决js，css路径错误问题})

我这里使用了环境变量，如果打包正式环境，使用相对路径获取静态资源，如果是debug模式直接访问根目录

1.2 proxy

配置开发服务器的代理规则，常用于解决跨域问题。这几乎是所有项目中必须配置的选项之一。配置方式如下：

export default defineConfig({   server: {       proxy: {           '/manage': {             target: 'https://motui8.cn/',             changeOrigin: true           }       }   }})

其中/manage是我们服务器url的开头，target表示服务器的域名。大至意思是请求的api，如果是以/manage开头的统统代理到target域名上

二：打包路径配置

在vue3中，vite提供了一个build参数，让我们配置打包后保存目录等相关配置。配置方式如下：

export default defineConfig({   build: {       outDir: '../public/admin',       chunkSizeWarningLimit: 2048,       emptyOutDir: true   }})

2.1 outDIr

vue3打包后项目保存的路径，可以是相对路径，也可以是绝对路径

2.2 chunkSizeWarningLimit

vue3打包后块的最大大小，默认是500kb。如果不设置此参数，打包时如果某个文件的大于500kb会报错，我们可以将打包后的块设置的更大一些，列如：2048kb，也就是2兆

2.3 emptyOutDir

打包时是否将输出目录之前的文件夹清空。如果设置为true，每次打包都会将输出目录中的所有文件全部删除，再把打包后的文件输出到输出目录