通过vite.config.js 暴露出defineConfig函数实现构造，vite会读取defineConfig返回的配置对象，配置对象需要自行编写
defineConfig
该函数是vite工具助手函数，用来读取构建配置，其返回一个配置参数对象
通过查看源码得知，vite配置有以下可选非必要内容，常用了内容一般从root到build
//读取UserConfigExport类型的参数，并返回UserConfigExport类型的数据
export declare function defineConfig(config: UserConfigExport): UserConfigExport;
//UserConfigExport类型
export declare type UserConfigExport = UserConfig | Promise<UserConfig> | UserConfigFn;
//UserConfig 接口
export declare interface UserConfig {
root?: string;
base?: string;
publicDir?: string | false;
cacheDir?: string;
mode?: string;
define?: Record<string, any>;
plugins?: PluginOption[];
resolve?: ResolveOptions & {
alias?: AliasOptions;
};
css?: CSSOptions;
json?: JsonOptions;
esbuild?: ESBuildOptions | false;
assetsInclude?: string | RegExp | (string | RegExp)[];
server?: ServerOptions;
build?: BuildOptions;
preview?: PreviewOptions;
optimizeDeps?: DepOptimizationOptions;
ssr?: SSROptions;
experimental?: ExperimentalOptions;
legacy?: LegacyOptions;
logLevel?: LogLevel;
customLogger?: Logger;
clearScreen?: boolean;
envDir?: string;
envPrefix?: string | string[];
worker?: {
format?: 'es' | 'iife';
plugins?: PluginOption[];
rollupOptions?: Omit<RollupOptions, 'plugins' | 'input' | 'onwarn' | 'preserveEntrySignatures'>;
};
appType?: AppType;
}常用配置项
root
项目根目录，默认值为process.cwd()
base
开发或生产环境下的基本公共路径配置，默认值为'/'
plugins
构建中使用的插件数组
resolve.alias
用来解析文件夹路径，改写文件夹快捷路径
resolve: {
alias: {
'@pages': resolve(__dirname, 'pages'),
'@theme': resolve(__dirname, 'theme'),
'@directive': resolve(__dirname, 'directive'),
'@service': resolve(__dirname, 'service'),
'@plugins': resolve(__dirname, 'plugins'),
'@utils': resolve(__dirname, 'utils'),
'@store': resolve(__dirname, 'store'),
'@assets': resolve(__dirname, 'assets'),
'@hooks': resolve(__dirname, 'hooks')
}
}css
css相关配置
css: {
preprocessorOptions: { //预处理器配置项 配置less sass等预处理器
less: {
additionalData: `@import '/assets/style/index.less';` //引入全局样式表
//除此之外还可配置变量属性，是否允许less使用js等
}
},
postcss: { //用来对css内容进行进一步处理，如单位转换，前缀自动补全等
plugins: [
require('autoprefixer'), //自动补全前缀
require('postcss-pxtorem')({ //px单位转换为rem，适用于移动端
rootValue: ({ file }) => {
let rootValue
if (file.indexOf('vant') > -1) {
rootValue = 37.5
} else if (file.indexOf('viewerjs') > -1) {
rootValue = 37.5
} else {
rootValue = 75
}
return rootValue
},
propList: ['*'],
selectorBlackList: ['.px']
})
]
}
}esbuild
将文件编译为js文件，常用于禁用打包后文件中的console和debugger
esbuild: {
drop: env.VITE_NODE_ENV === 'prod' ? ['console', 'debugger'] : []
},server
与网络配置相关
server:{
https: false, // 是否开启 https
open: false, // 是否自动在浏览器打开
port: 9999, // 端口号
host: '0.0.0.0', //监听本地网络，'0.0.0.0'代表监听所有网络
proxy: { //反向代理，用来跨域
'/api':{
target:'https://***.***.***/' //需要被代理到的服务器地址
changeOringin: true， //是否跨域
secure：false, //是否开启https服务
rewrite:(path)=>path.replace(/^\/api/,'/test-api'), //路径请求重写，匹配到/api后改写为/test-api
bypass(req, res, moptions){ //辅助工具，可以查看被代理后的网络请求的地址
if (env.VITE_NODE_ENV !== 'prod') {
const proxyURL = options.target + options.rewrite(req.url)
console.log('proxyURL', proxyURL)
res.setHeader('req-proxyURL', proxyURL) //由于设置在请求头会无效，所以设置在响应头
}
}
}
}
}build
打包特殊配置
build: {
outDir: 'dist', //打包输出文件夹名称
assetsDir: 'assets', //静态资源存放文件夹名
minify: 'esbuild', //打包压缩配置
chunkSizeWarningLimit: 1500,
cssCodeSplit: true, // 默认true。如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
rollupOptions: { //对rollup的深入配置
output: {
// 输出文件名 使用hash值作为文件名 每次打包都是不同值
chunkFileNames: `js/[hash].js`,
entryFileNames: `js/[hash].js`,
assetFileNames: 'assets/[hash].[ext]',
manualChunks(id) {
// 将pinia的全局库实例打包进vendor，避免和页面一起打包造成资源重复引入
if (id.includes(resolve(__dirname, 'store/index.ts'))) {
return 'vendor'
} else if (id.includes('node_modules')) {
// 单独打包第三方依赖
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
},
plugins: [
//使用terser压缩文件
terser({
ecma: 2020,
compress: {
unused: true,
drop_console: env.VITE_NODE_ENV === 'prod',
dead_code: true
},
output: {
comments: false
}
})
]
}
}