vue.config.js改成vite.config.ts

### 将 `vue.config.js` 配置迁移到 `vite.config.ts` 迁移 Vue CLI 项目的配置文件从 `vue.config.js` 到 Vite 的 `vite.config.ts` 主要涉及几个方面： #### 修改构建工具特定设置 对于 Webpack 特定的配置项，如插件或规则，在 Vite 中可能不再适用。Vite 使用 Rollup 来打包应用，因此需要转换这些配置来适应新的环境。 ```typescript // vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ vue(), // 添加其他必要的插件 ], }); ``` #### 处理静态资源路径 在 Vue CLI 中通过 `publicPath` 设置公共资源的基础路径。而在 Vite 中，则应使用 `base` 属性替代之[^1]。 ```typescript export default defineConfig({ base: '/my-app/', // 替代 publicPath ... }); ``` #### 转换代理设置 如果项目中有 API 请求需跨域处理，可以在 Vite 中利用 `server.proxy` 实现相同功能[^2]。 ```typescript export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, }); ``` #### CSS 相关配置 针对样式表的预处理器支持以及提取 CSS 文件等功能，可以借助相应插件完成。例如 LESS 支持可通过安装并注册 `@vitejs/plugin-less` 插件实现[^3]。 ```bash npm install @vitejs/plugin-less --save-dev ``` ```typescript import lessPlugin from '@vitejs/plugin-less'; export default defineConfig({ css: { preprocessorOptions: { less: { additionalData: `@import "./src/styles/variables.less";`, }, }, }, plugins: [..., lessPlugin()], }); ``` #### 环境变量管理 Vue CLI 和 Vite 对于 `.env.*` 文件的支持相似，只需遵循命名约定即可无缝过渡。注意区分不同模式下的环境变量前缀差异（`.env`, `.env.development`, `.env.production`），其中 Vite 默认读取的是 `VITE_` 开头的自定义变量[^4]。 ```javascript console.log(import.meta.env.VITE_APP_TITLE); // 访问 .env 文件中的 APP_TITLE 变量 ```