为在配置好 vite.config.ts 文件后

在配置`vite.config.ts`文件后，Vite是一个现代、快速的前端构建工具，它允许你通过JavaScript模块而不是传统的HTML/CSS/JS分开打包。这个配置文件为你提供了一个灵活的方式来定制项目的构建过程，包括：

1. **入口点**：定义应用的起点，如`import { app } from './main.js'`。
2. **路由设置**：可以配置静态文件的处理、动态路由映射等，例如使用`defineRoutes`。
3. **插件管理**：添加第三方插件，如优化工具、热更新、预加载资源等。
4. **构建选项**：控制如何分割代码、压缩CSS、处理图片等，影响生产环境的性能。
5. **服务器设置**：自定义开发服务器的行为，如端口、跨域、静态文件服务等。

为了更好地利用Vite，你可以按照以下步骤操作：

- 导入必要的配置项，如`import { defineConfig } from 'vite'`。
- 定义配置函数，接受Vite提供的默认配置并返回修改后的配置。
- 使用`export default`导出配置对象供Vite使用。

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  // ...基础配置，比如根路径、浏览器兼容性等
  base: '/my-app/', // 应用的URL前缀
  plugins: [
    // 添加特定插件
    require('@vitejs/plugin-vue')(), // 如果项目基于Vue
  ],
  build: {
    outDir: 'dist', // 输出目录
    rollupOptions: {
      input: 'src/main.js', // 主要的入口文件
    },
  },
});