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

简介：全面解析vite.config.js核心配置项，涵盖基础路径、代理设置、打包优化等高频场景，附生产环境最佳实践。

在使用 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，每次打包都会将输出目录中的所有文件全部删除，再把打包后的文件输出到输出目录

 

有遗漏或者不对的可以在我的公众号留言哦