好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

electron-vue中报错Cannot use import statement outside

错误:

@H_ 512 _20@Cannot use import stat ement outside a module(不能在模块之外使用导入语句)。

原因 :

安装的某个依赖包里使用了import语法,因为我们打包输出的是commonjs规范,所以不识别import语法而导致报错。

可以从 .electron-vue/webpack.renderer. config .js目录文件中看到如下一段代码:

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

解决 方案 :

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

externals作用:

防 止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external de PE ndencies)。

为什么使用了externals配置项可以解决:

因为在externals配置后,外部变量不会被打包,实际上可以以以下任何形式使用外部变量:全局变量、CommonJS、 am D、ES2015 模块。此时就可以保证代码在不同环境中可以识别import语法,从而不会有上面的报错信息出现。

具体关于webpack配置中externals的传送门: externals官方文档 externalsType官方文档

附: 启动项 目exe文件后,发现无法调用出 开发者 工具

解决方式:a、在electron-vue主进程中添加以下语句

m ai nWindow.webContents.openDevTools();
//  或者 mainWindow.openDevTools();

b、将package. JSON 中的devDependencies(开发环境使用)这几句添加到dependencies(生产环境使用),重新打包编译后即可调用开发者工具。

"electron-debug": "^1.5.0",
"electron-devtools -i nstaller": "^2.2.4"

总结

到此这篇关于electron-vue中报错Cannot use import statement outside a module的解决方案的 文章 就介绍到这了,更多相关报错Cannot use import statement outside a module内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能感兴趣的文章: electron渲染进程主进程相互传值示例解析 electron创建新窗口模态框并实现主进程传值给子进程 Electron+React应用打包全流程 vue基于electron构建第一个程序 electron桌面应用程序搭建及简单运行 Electron调用外接摄像头并拍照上传实现详解

总结

以上是 为你收集整理的 electron-vue中报错Cannot use import statement outside a module的解决方案(亲测有效!) 全部内容,希望文章能够帮你解决 electron-vue中报错Cannot use import statement outside a module的解决方案(亲测有效!) 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于electron-vue中报错Cannot use import statement outside的详细内容...

  阅读:51次