vue3+typescript+vite：vite.config.ts / 详细配置示例
一、vite.config.ts文件是什么
配置 Vite | Vite 官方中文文档
vite.config.ts 是 Vite 项目中的配置文件，它使用 TypeScript 编写，用于配置 Vite 的行为和特性。在 Vite 项目中，可以使用 vite.config.ts 文件来覆盖默认的配置选项或添加自定义配置选项。一些常见的配置选项包括：入口文件、输出目录、插件配置、端口号、代理设置、CSS 预处理器、构建配置等。
二、vite2 vite.config.ts 详细配置
// 导入Vite配置相关模块
import { defineConfig, loadEnv } from 'vite' // Vite的核心配置方法
import vue from '@vitejs/plugin-vue' // 支持Vue 3单文件组件
import vueJsx from '@vitejs/plugin-vue-jsx' // 支持Vue 3的JSX语法
import VueSetupExtend from 'vite-plugin-vue-setup-extend' // 支持在<script setup>中使用name属性
import { resolve } from 'path' // Node.js的路径处理模块
import checker from 'vite-plugin-checker' // 代码质量检查插件// 打印当前Node环境（用于调试）
console.log('77-process.argv', process.env.NODE_ENV)// Vite配置导出
// https://vitejs.dev/config/
export default defineConfig({// 基础路径，生产环境下指定子路径，开发环境下为空base: process.env.NODE_ENV === 'production' ? '/m-saas-pc/' : '',// 静态资源目录配置publicDir: './m-general/public/', // 指定静态资源存放目录// 插件配置plugins: [vue(), // 启用Vue 3支持VueSetupExtend(), // 允许在<script setup>中使用name属性vueJsx(), // 启用JSX语法支持checker({// 代码质量检查配置typescript: true, // 启用TypeScript类型检查vueTsc: {// Vue特定的类型检查配置tsconfigPath: './tsconfig.app.json' // 指定使用的tsconfig文件}})],// 模块解析配置resolve: {// 路径别名配置，简化模块导入alias: {'@': resolve(__dirname, 'src'), // 主src目录'@general': resolve(__dirname, 'm-general'), // 通用模块目录'@assets': resolve(__dirname, 'm-general/assets'), // 静态资源'@api': resolve(__dirname, 'm-general/api'), // API定义'@components': resolve(__dirname, 'm-general/components'), // 公共组件'@const': resolve(__dirname, 'm-general/const'), // 常量定义'@stores': resolve(__dirname, 'm-general/stores'), // 状态管理'@utils': resolve(__dirname, 'm-general/utils') // 工具函数}},// 开发服务器配置server: {host: '0.0.0.0', // 允许任何主机访问port: 3022, // 开发服务器端口open: false, // 不自动打开浏览器hmr: true, // 启用热模块替换// API代理配置，解决跨域问题proxy: {// 接口中心服务代理'/m-api': {target: loadEnv(process.argv[process.argv.length - 1], './env').VITE_SERVER_NAME, // 从环境变量读取目标地址changeOrigin: true // 修改请求头中的host为目标URL},}},// CSS相关配置css: {preprocessorOptions: {// SCSS预处理器配置scss: {// 全局注入SCSS变量和混入additionalData: `@forward "@general/assets/scss/variables.scss";`// 这样所有SCSS文件都可以直接使用variables.scss中定义的变量}}},// 生产环境构建配置build: {outDir: 'dist', // 输出目录assetsDir: 'assets', // 静态资源子目录sourcemap: false, // 不生成source map文件minify: 'terser', // 使用terser进行代码压缩// Terser压缩选项terserOptions: {compress: {drop_console: true, // 移除console语句drop_debugger: true // 移除debugger语句}},chunkSizeWarningLimit: 20000, // chunk大小警告阈值(KB)// Rollup配置rollupOptions: {// 可以在这里添加自定义Rollup插件plugins: [// 例如: includeView1(), // 自定义插件示例],// 可以指定入口点或包含/排除规则// input: {// index: resolve(__dirname, 'src/main.ts'),// },// 可以指定要包含的文件模式// include: ['views/canvas/**/*.vue']}}
})五、参考链接
开始 {#getting-started} | Vite中文网
Vite中文网
Vite | Next Generation Frontend Tooling
Vite世界指南（带你从0到1深入学习 vite）_哔哩哔哩_bilibili
百度安全验证