问题
前言:webpack在很多时候都很强大,但是对于在vue2的时代做为脚手架工具对于代码热跟新,以及项目启动就显得很慢,当我们的项目所使用的模块越来越多,基于webpack的vue项目就越慢,很耗时。
Vite+Vue3可以完美的解决这些问题,但是其中有一个最致命的问题,在vue2时代有很多的模块和包都是基于AMD、CMD、CommonJS规范开发的,但Vite是基于ES Module的开发服务器,所以在Vite下基于AMD、CMD、CommonJS规范开发的包和模块是无法直接使用的。
那么如何解决?
解决办法
安装vite-plugin-require-transform,配置vite.config.js文件后,require等就可以正常使用了。
一、安装
npm i vite-plugin-require-transform
二、在vite.config.js中配置
import { defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({
plugins: [
requireTransform({
fileRegex: /.js$|.vue$/
}),
],
});
三、在Vue3项目中使用基于AMD、CMD、CommonJS规范开发的包和模块
<script setup>
import { ref } from "vue";
//使用Nodejs基于CommonJS规范开发的npm包,vue-canonical-encyclopedia包含常用的几乎所有的正则。
const R=require('vue-canonical-encyclopedia');
const title_Rules1=R.Regular.Chinese;
const cate_id_Rules1=R.Regular.Number;
</script>
本文原创,原创不易,如需转载,请联系作者授权。