electron-vue中报错Cannot use import statement outside a module的解决方案(亲测有效!)

 更新时间:2023年02月16日 14:13:37   作者:DLGDark  
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架,下面这篇文章主要给大家介绍了关于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目录文件中看到如下一段代码:

output

上面图示中代码就可以看出打包输出的目标文件为commonjs规范,对es2015规范中import语法不识别。

解决方案:

使用webpack中的externals配置项解决。示例如下:

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2项目之swiper.js 的使用

    vue2项目之swiper.js 的使用

    这篇文章主要介绍了vue2项目之swiper.js 的使用,需要的朋友可以参考下
    2023-12-12
  • vuex状态管理浅谈之mapState用法

    vuex状态管理浅谈之mapState用法

    当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余,为了解决这个问题我们可以使用mapState辅助函数帮助我们生成计算属性,这篇文章主要给大家介绍了关于vuex状态管理之mapState用法的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue对话框组件使用方法详解

    Vue对话框组件使用方法详解

    这篇文章主要为大家详细介绍了Vue对话框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue3项目中reset.scss模板使用导入

    Vue3项目中reset.scss模板使用导入

    这篇文章主要为大家介绍了Vue3项目中reset.scss模板使用导入示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue制作加载更多功能的正确打开方式

    vue制作加载更多功能的正确打开方式

    这篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景——分页/无限加载,以及编写过程中自己的错误写法,分享给大家,帮助读者更好的理解Vue.js中的一些设计思想。
    2016-10-10
  • 详解搭建一个vue-cli的移动端H5开发模板

    详解搭建一个vue-cli的移动端H5开发模板

    这篇文章主要介绍了详解搭建一个vue-cli的移动端H5开发模板,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue +elementui 导入CSV文件的方式

    vue +elementui 导入CSV文件的方式

    封装一个公共js方法,使用papaparse解析CSV文件且返回数组格式,下面通过示例代码介绍vue +elementui 导入CSV文件的方式,感兴趣的朋友一起看看吧
    2024-04-04
  • Vue 绑定style和class样式的写法

    Vue 绑定style和class样式的写法

    class 与 style 绑定就是专门用来实现动态样式效果的技术,如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定,本文给大家讲解Vue 绑定style和class样式,感兴趣的朋友一起看看吧
    2023-10-10
  • 详解VS Code使用之Vue工程配置format代码格式化

    详解VS Code使用之Vue工程配置format代码格式化

    这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    这篇文章主要介绍了Vue项目中props传值时子组件检测不到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论