在ps中做网站首页的尺寸深圳关键词
一、修改依赖
首先修改 package.json，修改启动方式与相应依赖
移除vue-cli并下载vite相关依赖，注意一些peerDependency如fast-glob需要手动下载
# 移除 vue-cli 相关依赖
npm remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service vue-cli-plugin-element-plus vue-template-compiler webpack babel-eslint# 安装 vite 及相关依赖
npm install -D vite@5 @vitejs/plugin-vue vue-tsc vite-plugin-svg-icons sass fast-glob
二、vite.config.js
vite默认支持ES语法，将原先 vue-config.js 中的所有 require 手动修改为import，根据文档转为相应格式，如 publicPath 改为 base。
还需注意webpack中导入 layout/index.vue 可以简写为 import Layout from './layout'，Webpack 会自动去尝试：
- ./Chart.js
- ./Chart.vue
- ./Chart/index.js
- ./Chart/index.vue
Vite默认不会识别vue文件，extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] 手动声明让其识别vue文件
某些js也需要采用ES导出方式
三、启动项目
1. 启动无页面
npm run dev启动项目后发现并没有页面
因为 vite 读的是根目录，将 public/index.html 移动到根目录下并手动引入 main.js 即可。
2. 解决webpack模版语法
npm run dev 启动项目发现报错
这是因为 index.html 中使用到了webpack模版语法
3. 解决非 ESM 风格路径报警
这是 Vite 在处理 element-plus 中的非 ESM 风格路径（如 lib 目录）时报的警告/错误。element-plus/lib/… 是 CJS 构建产物，Vite 默认使用的是 ESM，不再支持这种方式。
import localeEN from 'element-plus/lib/locale/lang/en'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
// 改为
import localeEN from 'element-plus/es/locale/lang/en'
import localeZH from 'element-plus/es/locale/lang/zh-cn'
4. 解决样式问题
这是因为 vite.config.js 中已经将其变为了全局文件，无需手动引入，会造成加载问题。
5. .env环境变量
这是因为 vite 不再使用 node 的环境变量加载，而是将环境变量在一个特殊的对象上暴露，这个对象即是 import.meta.env, 并且 .env 文件只有 VITE_ 前缀的变量才会被 vite 处理
6. require.context
使用 import.meta.glob 来替代 require.context，动态导入目录中的文件
import { createApp } from 'vue'
import App from '@/App.vue'
import SvgIcon from '@/components/SvgIcon/index.vue' // svg组件const app = createApp(App)// 注册为全局组件
app.component('SvgIcons', SvgIcon)// 使用 import.meta.glob 来动态导入所有 svg 文件
const svgFiles = import.meta.glob('./svg/**/*.svg')// 动态导入所有 svg 文件
Object.keys(svgFiles).forEach(key => {svgFiles[key]() // 这里执行一下，确保文件被导入
})app.mount('#app')
四、总结
| 特性 | Vite | Vue CLI |
|---|---|---|
| 开发速度 | 秒级冷启动，热更新极快（基于 ES 模块） | 冷启动慢，热更新慢（基于 Webpack） |
| 打包工具 | 使用 Rollup 进行生产构建 | 使用 Webpack |
| 开发服务器 | 原生支持 ESModules，无需打包即可运行 | 启动前需先打包（基于 Webpack DevServer） |
| 配置方式 | 极简配置，基于 vite.config.js | 较复杂，基于 vue.config.js |
| 按需加载 | 天生支持模块按需加载 | 手动配置（如 babel-plugin-import） |
| 插件生态 | 新兴生态，兼容 Rollup 插件 | 成熟生态，基于 Webpack 插件 |
| 构建速度 | 构建快、体积小（使用 Rollup） | 构建慢（Webpack 本身性能瓶颈） |
| 类型支持 | 默认支持 TypeScript | 需要手动开启支持 |
| 体积优化 | 默认支持 Tree-shaking、动态导入 | 需要配置优化（如 splitChunks） |
打包体积由 20.8M 缩小为 3.8M
