我正在开发一个在 Electron 中运行的 vue 应用程序。为了便于设置,我使用带有 vue-cli-plugin-electron-builder 的 vue-cli .
我使用以下方法创建了项目:
vue create
一定要检查
babel
在特征选择中添加 Electron 包使用:
vue add electron-builder
并在
foo.js
中创建了一个类:export class Foo {
foo = "Hello";
}
现在,当在生成的
main.js
中导入该类时(创建 Vue 实例的地方)我可以使用npm run electron:serve
在 Electron 中运行应用程序。它打开了,没有显示任何错误,一切都符合预期。
但是如果我尝试导入
Foo
生成的 background.js
中的类(创建 Electron 窗口的地方)并运行npm run electron:serve
它向我显示了这个错误:ERROR Failed to compile with 1 errors
error in ./src/foo.js
Module parse failed: Unexpected token (2:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export class Foo {
> foo = "Hello";
| }
|
@ ./src/background.js 9:0-28
@ multi ./src/background.js
根据 github page 中的自述文件对于@vue/babel-preset-app
它应该使用
plugin-proposal-class-properties
.这听起来完全像应该使用的东西的类型。
我也尝试使用
vue.config.js
与 configureWebpack
并告诉它使用带有 vue 预设的 babel-loader。同样的错误。在
background.js
中导入模块时,我是否可以使用类属性? ?
最佳答案
在查看 documentation 时,我找到了解决问题的方法。对于 vue-cli-plugin-electron-builder。
它使用 webpack-chain包来配置 Electron 特定的捆绑。
所以不要使用 configureWebpack
在 vue.config.js
我按照 webpack-chain 的示例中的描述设置了我的配置:
module.exports = {
pluginOptions: {
electronBuilder: {
chainWebpackMainProcess: config => {
config.module
.rule("compile")
.test(/\.js$/)
.exclude.add(/(node_modules|dist_electron)/)
.end()
.use("babel")
.loader("babel-loader")
.options({
presets: ["@vue/cli-plugin-babel/preset"]
});
}
}
}
};
然后导入按预期工作。
关于javascript - 在 vue Electron 应用程序中无法使用 ECMAScript 类属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60414763/