javascript - SimulatedGreg Electron-Vue-Vuetify 错误消息：[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？

Question

首先，让我感谢您帮助解决我的问题。我今天早上 9 点左右开始解决这个问题，现在是下午 3 点，我仍然无法弄清楚如果有什么可以解决这个问题的话。为了理解我可能错过的基本原则，我数不清我观看的 youtube 视频的数量。

以下是我也看过并尝试过的所有其他 StackOverflow 问答对（有时甚至多次甚至组合）都没有运气：

https://forum.vuejs.org/t/solved-unknown-custom-element-v-card/43018

<v-card> - 您是否正确注册了组件？

“[Vue 警告]：未知的自定义元素：...”错误，当使用带有 vue-cli-plugin-vuetify 的 vuetify UI 组件时

Vuetifyjs错误未知的自定义元素：您是否正确注册了组件

https://github.com/SeregPie/VuetifyImageInput/issues/3

https://michaelnthiessen.com/solve-unknown-custom-element-vue/

Vue/Vuetify - 未知的自定义元素：<v-app> - 您是否正确注册了组件？

未知的自定义元素：<v-app> - 您是否正确注册了组件？对于递归组件

至此我已经基本放弃了为 Vuetify 寻找解决方案，如果到周一我仍然找不到解决方案，那么我将彻底放弃 Vuetify 并转向另一个框架，例如 VueBootstrap。

问题设置：我只是想通过基于项目的学习来学习 Electron-Vue-Vuetify。我决定从构建一个简单的计算器应用程序开始，这样我就可以学习如何创建组件并将它们与代码连接在一起，也许还可以学习如何进行 SASS/CSS 样式/主题。

我使用 GitHub 上的 SimulatedGreg 模板创建了一个样板应用程序： https ://github.com/SimulatedGREG/electron-vue

我验证了应用程序正在运行。然后我按照 NPM 安装 Vuetify 的步骤进行操作。我注意到 vuetify 安装程序修改了根文件夹中的 App.vue 文件，但没有修改渲染器文件夹中的 App.vue。所以我移动了它，我还注意到 Vuetify 安装程序也在 src 文件夹的根目录创建了一个新的组件文件夹，所以我将 HelloWorld.vue 组件移动到 src/renderer/components 文件夹中。我做了一些其他的小改动，以确保我尽我所能把它连接起来。验证了 Vuetify 插件已安装并保存在 package.json 的 Dev-dependencies 中，以及其他一些零碎的东西。

最后，我能够找到应用程序的加载位置，但所有样式都是错误的。现在它只是呈现给 DOM 的纯文本，根本没有任何样式。我在开发人员工具中遇到了一堆错误：

这是完整的错误日志：（对不起，我知道有点长，我试图删除冗长的冗余位）

[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
warn @ vue.esm.js?a026:628
createElm @ vue.esm.js?a026:5949
patch @ vue.esm.js?a026:6488
Vue._update @ vue.esm.js?a026:3954
updateComponent @ vue.esm.js?a026:4075
get @ vue.esm.js?a026:4488
Watcher @ vue.esm.js?a026:4477
mountComponent @ vue.esm.js?a026:4082
Vue.$mount @ vue.esm.js?a026:9063
Vue.$mount @ vue.esm.js?a026:11974
init @ vue.esm.js?a026:3127
createComponent @ vue.esm.js?a026:5989
createElm @ vue.esm.js?a026:5936
patch @ vue.esm.js?a026:6527
Vue._update @ vue.esm.js?a026:3954
updateComponent @ vue.esm.js?a026:4075
get @ vue.esm.js?a026:4488
Watcher @ vue.esm.js?a026:4477
mountComponent @ vue.esm.js?a026:4082
Vue.$mount @ vue.esm.js?a026:9063
Vue.$mount @ vue.esm.js?a026:11974
(anonymous) @ main.js?cebd:13
./src/renderer/main.js @ renderer.js:1351
__webpack_require__ @ renderer.js:791
fn @ renderer.js:102
1 @ renderer.js:1423
__webpack_require__ @ renderer.js:791
(anonymous) @ renderer.js:858
(anonymous) @ renderer.js:861
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-app-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
2vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-spacer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
2vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>

一些 Vuetify 用户可能也在 Vuetify Facebook 页面上。我确实在那里重新发布了我的问题，只是希望能得到任何帮助！

我尝试过的其他一些事情，您可能会在下面链接的代码仓库中看到：

在 main.js 文件中，我尝试通过以下方式修改代码....查看注释代码：

import Vue from 'vue'
import axios from 'axios'
// import '../plugins/vuetify' <--Attempted to add this....causes the application to not load anything!
import App from './App'
import router from './router'
import store from './store'

同样在 main.js 中：

new Vue({
  components: { App },
  router,
  // vuetify: Vuetify, <--Also attempted to add this here....same issue as above, not loads at all.
  store,
  template: '<App/>'
}).$mount('#app')

我将代码发布到 GitHub 上的沙盒存储库： https ://github.com/SethEden/EVJS-Calculator

随意克隆它，看看您是否可以帮助我弄清楚我没有正确完成什么或我缺少什么？我敢肯定这是非常愚蠢的事情，但希望它能帮助其他人克服类似或相关的问题。同样，我的主要目标是学习！因此，如果您有任何其他信息，您可以描述为什么更改很重要，这将有助于我了解更多！

也许这个问题的答案是其他问题之一的答案，但也许我只是没有完全理解这些答案，无法在我自己的情况下实施它。无论如何，我希望它对其他人有所帮助！

再次感谢你！！干杯，周末愉快！〜赛斯

更新：

首先设置，遵循本教程： https ://medium.com/@bromix/electron-application-with-vue-js-and-vuetify-f2a1f9c749b8

npm install -g @vue/cli vue create electron-app vue add vuetify vue add electron-builder

结果：Vue、Electron 和 Vuetify 的一切都运行良好，但文件夹结构不正确，无法作为企业应用程序扩展。默认文件夹结构：ProjectName

• src --- main.js

这应该是文件夹结构： ProjectName

• src --- Application ------ ProjectName --------- main.js

这样我们就可以拥有一个框架文件夹，并且所有内容都将包含在 src 项目根文件夹中。

src 路径中的所有文件都移到了新的文件夹结构路径中：@/src/Application/ProjectName/。

结果：构建完全中断。

找到这篇博客文章：

https://vuejsdevelopers.com/2019/03/18/vue-cli-3-rename-src-folder/

而这篇文章：

https://vuejsdevelopers.com/2019/03/11/vue-cli-3-full-stack/

这个 GitHub 错误报告：

https://github.com/vuejs/vue-cli/issues/1134

实施这些修复后，构建仍然被破坏，额外的搜索，我发现了这个：

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#webpack-configuration

在实施此修复以及对代码文件和 package.json 主入口点中的各种路径进行一些其他明显更改后，构建现在可以工作，但应用程序在加载时出错并且 Vue 无法呈现。

错误信息：

[HMR] Waiting for update signal from WDS...
utils.js?e375:21 Uncaught TypeError: Cannot read property 'getPath' of undefined
    at getPath (utils.js?e375:21)
    at getIDMapPath (index.js?b206:29)
    at eval (index.js?b206:32)
    at Object../node_modules/electron-devtools-installer/dist/index.js (chunk-vendors.js:1117)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (background.js?e28f:1)
    at Module../src/Application/electronVueJS-App/background.js (app.js:949)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)

在以下路径查找 utils.js?e375:21：C:\electronVueJS-App\node_modules\electron-devtools-installer\dist\utils.js

失败的代码是：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.changePermissions = exports.downloadFile = exports.getPath = void 0;

var _electron = require("electron");

var _fs = _interopRequireDefault(require("fs"));

var _path = _interopRequireDefault(require("path"));

var _https = _interopRequireDefault(require("https"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var getPath = function getPath() {
  var savePath = _electron.app.getPath('userData'); // <-------------------- HERE

尝试像这样修改上面的代码，以便能够看到究竟是什么失败了：

var getPath = function getPath() {
    console.log('_electron is: ' + JSON.stringify(_electron));
    console.log('_electron is: ', _electron);
    var savePath = _electron.app.getPath('userData'); // <-------------------- HERE

现在构建无法完成构建过程，因此尝试其他操作：而不是：

var _electron = require("electron");

我要这样做：

const remote = require('electron').remote;
const app = remote.app;
console.log(app.getPath('userData'));

然后我会尝试：

const remote = require('electron').remote;
console.log('remote electron is: ", remote);
const app = remote.app;
console.log('remote app is: ', app);
console.log(app.getPath('userData'));

最后：

var getPath = function getPath() {
var savePath = app.getPath('userData');

另一个构建时错误：

[Window Title]
Error

[Main Instruction]
A JavaScript error occurred in the main process

[Content]
Uncaught Exception:
TypeError: Cannot read property 'app' of undefined
    at eval (webpack:///./node_modules/electron-devtools-installer/dist/utils.js?:11:20)
    at Object../node_modules/electron-devtools-installer/dist/utils.js (C:\electronVueJS-App\dist_electron\index.js:166:1)
    at __webpack_require__ (C:\electronVueJS-App\dist_electron\index.js:20:30)
    at eval (webpack:///./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js?:16:14)
    at Object../node_modules/electron-devtools-installer/dist/downloadChromeExtension.js (C:\electronVueJS-App\dist_electron\index.js:142:1)
    at __webpack_require__ (C:\electronVueJS-App\dist_electron\index.js:20:30)
    at eval (webpack:///./node_modules/electron-devtools-installer/dist/index.js?:16:55)
    at Object../node_modules/electron-devtools-installer/dist/index.js (C:\electronVueJS-App\dist_electron\index.js:154:1)
    at __webpack_require__ (C:\electronVueJS-App\dist_electron\index.js:20:30)
    at eval (webpack:///./src/Application/electronVueJS-App/background.js?:6:85)

该错误现在发生在这一行：

const electApp = remote.app;

很明显这没有用。

为了安全起见，还原代码，因为这是最接近运行应用程序的方法。

现在的错误是：

utils.js?e375:19 Uncaught TypeError: Cannot read property 'getPath' of undefined
    at getPath (utils.js?e375:19)
    at getIDMapPath (index.js?b206:29)
    at eval (index.js?b206:32)
    at Object../node_modules/electron-devtools-installer/dist/index.js (chunk-vendors.js:1117)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (background.js?e28f:1)
    at Module../src/Application/electronVueJS-App/background.js (app.js:949)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)

尝试通过 Electron 日志记录参数启用 Chrome 日志记录：“electron:serve”：“vue-cli-service electron:serve --enable-logging”，

这弹出了一些额外的窗口，但没有显示额外的信息。

在 VueJS 开发人员 Facebook 页面上与 Sean Alexander Free 的进一步调查发现了以下内容：有趣的是，问题出在第 18 行的 electron-dev-tools-installer 节点模块的 index.js 中：var _utils = require("./utils") ;

找不到相对路径，因为当前目录是电子的渲染器路径。

在 require 显示后添加 console.log(__dirname)： D:\workspace\electronVueJS-App\node_modules\electron\dist\resources\electron.asar\renderer

这当然不是通过相对路径从 node_modules 文件夹中提取资源的正确路径。

似乎这是安装程序模块本身的问题，但我认为一些 webpack 技巧可以解决这个问题。

我的回应啊啊啊我明白你在说什么。因此，似乎在 Electron-dev-tools-installer 内部代码的某个地方，开发人员重用了 init-main 路径作为基础路径并获取要加载的资源.... 非常典型的编程技术，因为似乎他们从未计划允许系统文件夹结构针对自定义企业解决方案进行扩展。（EG 客户端-服务器）。此外，我敢打赌，这不会是我遇到的最后一个问题……当然也不是第一个。我将恢复到默认安装并研究将 background.js 和 main.js 文件转换为包装器/呼叫转发器的方法，并尝试使其以这种方式工作。

模板的最终工作回购是：（我将把它留给其他人） https://github.com/SethEden/electronVueJS-Basic

标签： javascriptnode.jsvue.jselectronvuetify.js

Answer 1

我对 Electron 完全陌生，同时我发现了Github 的回复并尝试了它。
它工作得很好（我在左上角添加了一个按钮来测试它）。

也许不使用整个 Electron 样板，但它可以让你准备好 Electron + Vue + Vuetify。:)

我想这个答案可能会帮助您调试整个样板并使其工作，但它需要一些 webpack 配置知识。

不确定是否值得投入时间或奋斗，但由于有几个人指出，它可能真的有效。^^

~~
哦，我不是专家，但如果你想调试你当前的配置而不是我的解决方案，你可能会问Vue Discord上的人。