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)文章
這篇文章主要介紹了vue2項(xiàng)目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余,為了解決這個(gè)問(wèn)題我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性,這篇文章主要給大家介紹了關(guān)于vuex狀態(tài)管理之mapState用法的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue對(duì)話框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
這篇文章主要為大家介紹了Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場(chǎng)景——分頁(yè)/無(wú)限加載，以及編寫過(guò)程中自己的錯(cuò)誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。2016-10-10
詳解搭建一個(gè)vue-cli的移動(dòng)端H5開發(fā)模板
這篇文章主要介紹了詳解搭建一個(gè)vue-cli的移動(dòng)端H5開發(fā)模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vue +elementui 導(dǎo)入CSV文件的方式
封裝一個(gè)公共js方法,使用papaparse解析CSV文件且返回?cái)?shù)組格式,下面通過(guò)示例代碼介紹vue +elementui 導(dǎo)入CSV文件的方式,感興趣的朋友一起看看吧2024-04-04
class 與 style 綁定就是專門用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù),如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
詳解VS Code使用之Vue工程配置format代碼格式化
這篇文章主要介紹了詳解VS Code使用之Vue工程配置format代碼格式化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08