Vue Cli 迁移至 Vite

一、前言

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

二、改动的文件

1. package.json

2. 入口文件调整

1. cli 是放在 public 目录下的

2. vite 是放项目根目录下

4. 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. 参考：https://blog.csdn.net/AB12543/article/details/132142694

3. require 动态导入图片错误

1. 错误
   

2. 原写法
   

3. 换写法之后正常
   

4. 参考：https://www.cnblogs.com/zoro-zero/p/14276331.html

四、总结

1. 踩的坑的话基本 Vite 不支持 CommonJS 写法，导致编译上的错误
2. 优点
   1. 启动快，不管项目多大，先开启一个服务，去请求当前页面所需文件，将编译好的代码返回
   2. 热加载，当某个文件更新之后，利用浏览器的 ESM 模块及其动态导入特性，重新请求更改后的文件
3. 缺点：
   1. 第一次启动时，加载页面白屏一段时间，因为是先开服务再去请求当前页面的文件进行编译，需要花些时间
   2. 之后再访问的就好多了，Vite 默认启用了缓存的，一旦资源被加载，它会被缓存起来了
   3. 比如element-ui