electron-vue中报错Cannot use import statement outside a module的解决方案(亲测有效!)
错误：
Cannot use import statement outside a module(不能在模块之外使用导入语句)。
原因：
安装的某个依赖包里使用了import语法，因为我们打包输出的是commonjs规范，所以不识别import语法而导致报错。
可以从 .electron-vue/webpack.renderer.config.js目录文件中看到如下一段代码：
上面图示中代码就可以看出打包输出的目标文件为commonjs规范，对es2015规范中import语法不识别。
解决方案：
使用webpack中的externals配置项解决。示例如下：
externals作用：
防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
为什么使用了externals配置项可以解决：
因为在externals配置后，外部变量不会被打包，实际上可以以以下任何形式使用外部变量：全局变量、CommonJS、AMD、ES2015 模块。此时就可以保证代码在不同环境中可以识别import语法，从而不会有上面的报错信息出现。
具体关于webpack配置中externals的传送门：externals官方文档 externalsType官方文档
附：启动项目exe文件后，发现无法调用出开发者工具
解决方式：a、在electron-vue主进程中添加以下语句
mainWindow.webContents.openDevTools(); // 或者mainWindow.openDevTools();
b、将package.json 中的devDependencies（开发环境使用）这几句添加到dependencies（生产环境使用），重新打包编译后即可调用开发者工具。
"electron-debug": "^1.5.0", "electron-devtools-installer": "^2.2.4"
总结
到此这篇关于electron-vue中报错Cannot use import statement outside a module的解决方案的文章就介绍到这了,更多相关报错Cannot use import statement outside a module内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
防抖（Debounce）在前端开发中是一种常用的技术,它的作用是限制某个操作在短时间内的频繁触发,下面我们就来看看如何一个Vue指令搞定函数防抖吧2024-02-02
vue监听屏幕尺寸变化问题,window.onresize很简单
这篇文章主要介绍了vue监听屏幕尺寸变化问题,window.onresize很简单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章介绍了Vue发送ajax请求的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-01-01
本文通过实例代码给大家介绍了Vue表单demo v-model双向绑定问题,代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
Vue quill-editor 编辑器使用及自定义toobar示例详解
这篇文章主要介绍了Vue quill-editor编辑器使用及自定义toobar示例详解,这里讲解编辑器quil-editor的知识结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
Vue组件传值方式(props属性,父到子,子到父,兄弟传值)
这篇文章主要介绍了Vue组件传值方式(props属性,父到子,子到父,兄弟传值),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue储存storage时含有布尔值的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
Vue3中的createGlobalState用法及示例详解
createGlobalState 是 Vue 3 中一种管理全局状态的简便方式,通常用于管理多个组件间共享的状态,由 @vueuse/core 提供的,允许创建一个响应式的全局状态,本文给大家介绍了Vue3中的createGlobalState用法及示例,需要的朋友可以参考下2024-10-10
这篇文章主要给大家介绍了关于vue如何使用moment处理时间戳转换成日期或时间格式的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者vue具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了使用Vue CLI配置代码压缩、加密和混淆功能,通过配置 vue.config.js 文件，我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆，需要的朋友可以参考下2023-06-06
最新评论