一、前言

1. 项目文件一多起来，cli 的话是先将所有文件编译完，再开启服务，启动慢，影响开发体验
2. 而 vite 先开服务之后，再按需加载当前页面需要的文件，开发体验就好很多

二、改动的文件

1. package.json

2. 入口文件调整

1. cli 是放在 public 目录下的

1. vite 是放项目根目录下

1. copy public 下的 index.html 到项目根目录下的 index 文件，并引入 main.js 构建

3. babel.config.js 更改

4. vite.config.js 配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';

import path from 'path';
import requireTransform from 'vite-plugin-require-transform';
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig({
	plugins: [
    vue(),
    commonjs(),
    requireTransform({
      fileRegex: /.js$|.vue$/,
		}),
	],
	resolve: {
		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
		alias: {
			'@': path.resolve(__dirname, './src'),
		},
	},
	build: {
		minify: 'terser',
		terserOptions: {
		  compress: {
		    drop_console: true,
		    drop_debugger: true
		  }
		},
		assetsInlineLimit: 4096 * 500
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@import "@/assets/styles/variables.scss";`,
			},
		},
	},
	server: {
		port: 9591,
		open: true,
		host: true,
	},
});

三、问题

1. vite 不能使用 require 方法

1. 错误
2. 下载 vite-plugin-require-transform 插件，配置在文章最后

2. 打包错误

1. 错误
2. 下载 @rollup/plugin-commonjs，将 CommonJS 写法转换为 ESM 供 Rollup 处理，配置在文章最后
3. 参考：blog.csdn.net/AB12543/art…

3. require 动态导入图片错误

1. 错误
2. 原写法
3. 换写法之后正常
4. 参考：www.cnblogs.com/zoro-zero/p…

四、总结

1. 坑的话基本都是 require 语法在 vite 上不支持
2. 优点
   1. 启动快，不管项目多大，先开启一个服务，去请求当前页面所需文件，将编译好的代码返回
   2. 热加载，当某个文件更新之后，重新请求更改后的文件就行，不像webpack 需要把该文件的相关依赖模块全编译一次
3. 缺点：
   1. 第一次启动时，加载页面白屏一段时间，因为是先开服务再编译，和一些第三方库以及当前页面的文件
   2. 之后再访问的就好多了，因为请求的第三方库都会被缓存起来了
   3. 比如element-ui