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配置項(xiàng)解決。示例如下：
externals作用：
防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies)。
為什么使用了externals配置項(xiàng)可以解決：
因?yàn)樵趀xternals配置后，外部變量不會被打包，實(shí)際上可以以以下任何形式使用外部變量：全局變量、CommonJS、AMD、ES2015 模塊。此時就可以保證代碼在不同環(huán)境中可以識別import語法，從而不會有上面的報錯信息出現(xiàn)。
具體關(guān)于webpack配置中externals的傳送門：externals官方文檔 externalsType官方文檔
附：啟動項(xiàng)目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)文章
這篇文章主要介紹了vue2項(xiàng)目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
當(dāng)一個組件需要獲取多個狀態(tài)的時候,將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余,為了解決這個問題我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性,這篇文章主要給大家介紹了關(guān)于vuex狀態(tài)管理之mapState用法的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue對話框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下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ù)場景——分頁/無限加載，以及編寫過程中自己的錯誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。2016-10-10
這篇文章主要介紹了詳解搭建一個vue-cli的移動端H5開發(fā)模板，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vue +elementui 導(dǎo)入CSV文件的方式
封裝一個公共js方法,使用papaparse解析CSV文件且返回?cái)?shù)組格式,下面通過示例代碼介紹vue +elementui 導(dǎo)入CSV文件的方式,感興趣的朋友一起看看吧2024-04-04
class 與 style 綁定就是專門用來實(shí)現(xiàn)動態(tài)樣式效果的技術(shù),如果需要動態(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
詳解VS Code使用之Vue工程配置format代碼格式化
這篇文章主要介紹了詳解VS Code使用之Vue工程配置format代碼格式化，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue項(xiàng)目中props傳值時子組件檢測不到的問題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時子組件檢測不到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08