electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?module的解決方案(親測(cè)有效!)
錯(cuò)誤：
Cannot use import statement outside a module(不能在模塊之外使用導(dǎo)入語(yǔ)句)。
原因：
安裝的某個(gè)依賴包里使用了import語(yǔ)法，因?yàn)槲覀兇虬敵龅氖莄ommonjs規(guī)范，所以不識(shí)別import語(yǔ)法而導(dǎo)致報(bào)錯(cuò)。
可以從 .electron-vue/webpack.renderer.config.js目錄文件中看到如下一段代碼：
上面圖示中代碼就可以看出打包輸出的目標(biāo)文件為commonjs規(guī)范，對(duì)es2015規(guī)范中import語(yǔ)法不識(shí)別。
解決方案：
使用webpack中的externals配置項(xiàng)解決。示例如下：
externals作用：
防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies)。
為什么使用了externals配置項(xiàng)可以解決：
因?yàn)樵趀xternals配置后，外部變量不會(huì)被打包，實(shí)際上可以以以下任何形式使用外部變量：全局變量、CommonJS、AMD、ES2015 模塊。此時(shí)就可以保證代碼在不同環(huán)境中可以識(shí)別import語(yǔ)法，從而不會(huì)有上面的報(bào)錯(cuò)信息出現(xiàn)。
具體關(guān)于webpack配置中externals的傳送門：externals官方文檔 externalsType官方文檔
附：?jiǎn)?dòng)項(xiàng)目exe文件后，發(fā)現(xiàn)無(wú)法調(diào)用出開發(fā)者工具
解決方式：a、在electron-vue主進(jìn)程中添加以下語(yǔ)句
mainWindow.webContents.openDevTools(); // 或者mainWindow.openDevTools();
b、將package.json 中的devDependencies（開發(fā)環(huán)境使用）這幾句添加到dependencies（生產(chǎn)環(huán)境使用），重新打包編譯后即可調(diào)用開發(fā)者工具。
"electron-debug": "^1.5.0", "electron-devtools-installer": "^2.2.4"
總結(jié)
到此這篇關(guān)于electron-vue中報(bào)錯(cuò)Cannot use import statement outside a module的解決方案的文章就介紹到這了,更多相關(guān)報(bào)錯(cuò)Cannot use import statement outside a module內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
防抖（Debounce）在前端開發(fā)中是一種常用的技術(shù),它的作用是限制某個(gè)操作在短時(shí)間內(nèi)的頻繁觸發(fā),下面我們就來(lái)看看如何一個(gè)Vue指令搞定函數(shù)防抖吧2024-02-02
vue監(jiān)聽屏幕尺寸變化問(wèn)題,window.onresize很簡(jiǎn)單
這篇文章主要介紹了vue監(jiān)聽屏幕尺寸變化問(wèn)題,window.onresize很簡(jiǎn)單,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章介紹了Vue發(fā)送ajax請(qǐng)求的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
本文通過(guò)實(shí)例代碼給大家介紹了Vue表單demo v-model雙向綁定問(wèn)題,代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識(shí)結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue儲(chǔ)存storage時(shí)含有布爾值的解決方案
這篇文章主要介紹了vue儲(chǔ)存storage時(shí)含有布爾值的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡(jiǎn)便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了使用Vue?CLI配置代碼壓縮、加密和混淆功能,通過(guò)配置 vue.config.js 文件，我們可以使用 Vue CLI 輕松實(shí)現(xiàn)對(duì) Vue 應(yīng)用程序代碼的壓縮、加密和混淆，需要的朋友可以參考下2023-06-06