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