---
title: Vben Vite Config
---
classDiagram
    CommonPluginOptions <|-- ApplicationPluginOptions
    CommonPluginOptions <|-- LibraryPluginOptions
    class CommonPluginOptions {
        +Boolean devtools
        +Record<string, any> env 
        +Boolean isBuild        
        +String mode
        +Boolean visualizer
    }
    class ApplicationPluginOptions{
        +boolean archiver
        +ArchiverPluginOptions archiverPluginOptions
        +boolean  compress
        +gzip compressTypes
        +Boolean extraAppConfig
        +Boolean html
        +Boolean i18n
        +Boolean importmap
        +ImportmapPluginOptions importmapOptions
        +Boolean injectAppLoading
        +Boolean injectGlobalScss
        +Boolean license
        +Boolean nitroMock
        +Boolean nitroMockOptions
        +Boolean print
        +PrintPluginOptionsprintInfoMap
        +Boolean pwa
        +PwaPluginOptions pwaOptions
        +Boolean vxeTableLazyImport
        
    }
    class ArchiverPluginOptions{
        +String name
        +String outputDir
    }
    class LibraryPluginOptions{
	    +Boolean dts
    }
    ApplicationPluginOptions *-- ArchiverPluginOptions : has
    ApplicationPluginOptions *-- ImportmapPluginOptions : has
    ApplicationPluginOptions *-- NitroMockPluginOptions : has
    class NitroMockPluginOptions{
	    +String mockServerPackage
	    +Number port
	    +Boolean verbose
    }
    class ImportmapPluginOptions{
     +String defaultProvider
     +Array importmap
     +IImportMap inputMap
    }

环境

走 .env* 走的变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

以 VITE_ 开头的变量会被嵌入到客户端侧的包中，你可以在项目代码中这样访问它们：

console.log(import.meta.env.VITE_PROT);

以 VITE_GLOB_* 开头的的变量，在打包的时候，会被加入 _app.config.js配置文件当中

一部分的 环境配置是否可以被 应用 层覆盖？ 在哪里被merger?

名称 用途
VITE_APP_TITLE 应用标题
VITE_PORT 端口号
VITE_APP_NAMESPACE 应用命名空间，用于缓存、store等功能的前缀，确保隔离
VITE_GLOB_API_URL 接口地址： /api or https://example.com/api
VITE_INJECT_APP_LOADING 是否注入全局loading
VITE_ROUTER_HISTORY vue-router 的模式 hash or etc

VITE_GLOB_API_URL 会被生成加工到 _app.config.js 里面去