vue3（vite）中引入commonjs包

至于vue2中可以直接使用const package = require(“package.js”)来引入commonjs包，是因为webpack帮我们做了处理，vite建议用es module的写法，但是有很多的一些工具包还是commonjs的写法，所以挺无奈的

第一种通过import(“xxx”)的形式导入

common.js的内容

const msg = "msg";
module.exports = {
    msg
}

<script setup>
import ("common.js")
 .then(com => {
    const { msg } = com;
    console.log(msg)
 })
</script>

第二种就是安装vite的插件

vite-plugin-require-transform

首先安装

yarn add -D vite-plugin-require-transform
or
npm i vite-plugin-require-transform --save-dev
or
pnpm add -D 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$/
    }),
  ],

参考 关于Vite不能使用require问题