vite【详解】常用配置 vite.config.js / vite.config.ts

官网 https://cn.vitejs.dev/guide/

vite 常用配置

Vite 配置文件通常是 vite.config.js （使用 CommonJS 语法）或者 vite.config.ts（使用 TypeScript 语法），默认内容为

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()]
})

解析配置 resolve

路径别名 alias

使用 @ 来代替 src 目录

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 导入 path 
import path from 'path'export default defineConfig({plugins: [vue()],resolve: {// 配置别名alias: {'@': path.resolve(__dirname, './src')}}
})

extensions

导入模块时可省略的文件扩展名列表，默认值是 [‘.mjs’, ‘.js’, ‘.ts’, ‘.jsx’, ‘.tsx’, ‘.json’]。

如果想支持 .vue 文件省略扩展名导入，则配置如下：

resolve: {extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']}

服务器配置 server（含跨域 proxy）

export default defineConfig({server: {// 指定服务器监听的主机名。设置为 '0.0.0.0' 可以让服务器外部可访问，常用于在局域网内共享开发服务器。host: '0.0.0.0',// 指定开发服务器的端口号,常在默认端口被占用时修改port: 3000,// 在开发环境中进行跨域请求，可以配置代理proxy: {// 将以 /api 开头的请求代理到 http://localhost:3000 服务器。'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}},
});

配置插件 plugins

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],
});

构建配置 build

build: {// 指定打包输出的目录，默认是 distoutDir: 'my-dist',// 指定是否压缩代码，可取值 'terser'、'esbuild' 或 false。 'terser' 压缩效果更好但速度较慢，'esbuild' 速度快但压缩率稍低。minify: 'esbuild',// 是否生成源映射文件，方便调试生产环境代码。可取值 true、false、'inline'、'hidden' 等, inline 表示生成内联源映射文件sourcemap: 'inline'},

项目根目录 root

index.html 文件所在的位置

export default defineConfig({root: './src',
});

公共基础路径 base

开发或生产环境服务的公共基础路径，默认值为 /。可以是绝对路径或相对路径。

类似于 Webpack 中的 publicPath，如果项目要部署在子路径下，就需要修改该配置。

export default defineConfig({// 项目部署在 https://example.com/my-app/ 下base: '/my-app/',
});

环境配置 define

定义全局常量替换方式，在代码中可以直接使用这些常量。

export default defineConfig({define: {__APP_VERSION__: JSON.stringify('1.0.0'),},
});

代码中使用

console.log(`应用版本号: ${__APP_VERSION__}`);

依赖优化配置

强制预构建的依赖项列表，Vite 会在启动时对这些依赖进行预构建，以提高冷启动速度。

export default defineConfig({optimizeDeps: {include: ['lodash']}
});