vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題解決辦法
項目場景:
vue3+ts+vite項目打包
問題描述
// codemirror 編輯器的相關(guān)資源 import Codemirror from 'codemirror'; error during build: RollupError: "default" is not exported by "node_modules/vue/dist/vue.runtime.esm-bundler.js", imported by "node_modules/@kangc/v-md-editor/lib/codemirror-editor.js". at error (file:///D:...
原因分析:
報錯意思是導(dǎo)入的js文件沒有默認導(dǎo)出
解決方案:
有兩種方法
1.修改node_modoules下的文件源碼
在前面加上expoert default
export default (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.CodeMirror = factory()); }(this, (function () { 'use strict';
為這個js文件添加一個默認導(dǎo)出
不太推薦這個方法,雖然比較簡單
2.安裝@rollup/plugin-commonjs插件,vite-plugin-require-transform插件
@rollup/plugin-commonjs可以將commonjs模塊轉(zhuǎn)換層es6模塊
但只會對require生效
所以需要將導(dǎo)入改為require格式
(1)安裝插件
npm i @rollup/plugin-commonjs npm i vite-plugin-require-transform
(2)添加配置
在vite.config.ts配置中添加插件,注意commonjs()必須在上面,否則可能不生效
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import commonjs from '@rollup/plugin-commonjs';//引入commojs import requireTransform from 'vite-plugin-require-transform';//引入require export default defineConfig({ plugins: [ commonjs() as any, //我的入口文件是ts類型,所以下面必須加上.ts$,否則在main.ts無法使用require requireTransform({ fileRegex: /.js$|.vue$|.png$|.ts$|.jpg$/ }) //配置require vue(), ], }
(3)將main.ts中的導(dǎo)入改為require
// codemirror 編輯器的相關(guān)資源 const Codemirror = require('codemirror');
總結(jié)
到此這篇關(guān)于vite打包出現(xiàn) "default" is not exported by "node_modules/...問題解決辦法的文章就介紹到這了,更多相關(guān)vite打包default is not exported by node_modules/...內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 解決vite build打包后頁面不能正常訪問的情況
- vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
- vite打包只生成了一個css和js文件問題的解決方法
- 關(guān)于vite+vue3打包部署問題
- vite打包優(yōu)化分片打包依賴包詳解
- Vue3在history模式下如何通過vite打包部署白屏
- 解決vite打包后白屏之router-view不生效問題
- VUE3?Vite打包后動態(tài)圖片資源不顯示問題解決方法
- vite分目錄打包及去掉默認的.gz?文件的操作方法
- VUE3項目VITE打包優(yōu)化的實現(xiàn)
- Vite中Rollup打包的實現(xiàn)
相關(guān)文章
Vue監(jiān)聽localstorage變化的方法詳解
在日常開發(fā)中,我們經(jīng)常使用localStorage來存儲一些變量,這些變量會存儲在瀏覽中,對于localStorage來說,即使關(guān)閉瀏覽器,這些變量依然存儲著,方便我們開發(fā)的時候在別的地方使用,本文就給大家介紹Vue如何監(jiān)聽localstorage的變化,需要的朋友可以參考下2023-10-10vue+elemen實現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)
el-tooltip組件本身就是懸浮提示功能,在對它進行二次封裝時,實現(xiàn)超出的文本浮現(xiàn),本文就來介紹一下vue+elemen實現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下2023-12-12