Vue Cli 迁移至 Vite

一、前言

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

二、改动的文件

1. package.json

2. 入口文件调整

1. cli 是放在 public 目录下的

2. vite 是放项目根目录下

3. copy public 下的 index.html 到项目根目录下，并引入 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 插件，配置在改动文件的 vite.config.js 查看

2. 打包错误

1. 错误
   

2. 下载 @rollup/plugin-commonjs，将 CommonJS 写法转换为 ESM 供 Rollup 处理，配置在改动文件的 vite.config.js 查看

3. 参考：https://blog.youkuaiyun.com/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