Vue 组件工作主 Vue 实例，但不在 Vue Router 组件中
Posted
技术标签:
【中文标题】Vue 组件工作主 Vue 实例，但不在 Vue Router 组件中【英文标题】：Vue component working main Vue instance but not in Vue Router component 【发布时间】：2020-03-07 04:50:33 【问题描述】：我在 welcome.blade.php 文件中为我的应用设置了一个 Laravel / Vue 应用，其中包含主要元素 (#app)。 然后我有 app.js 文件，我在其中启动了我的 Vue 实例。然后是我的 routes.js 和 MyComponent.vue 文件。
在 MyComponnent.vue 中，我正在尝试加载 vue-winwheel。但我不断收到此警告：
[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
并且组件不会加载。如果我直接在welcome.blade.php 文件中使用它会加载，但当然是在错误的地方。
我确实在全球范围内注册了 VueWinwheel（测试了 VueWinwheel 和 vue-winwheel）。 有人知道我缺少什么吗？
app.js
import Vue from 'vue';
import Vuex from 'vuex'
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue'
import VueWinwheel from 'vue-winwheel/vue-winwheel'
import routes from './routes';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(BootstrapVue);
Vue.use(VueWinwheel);
require('./bootstrap');
let app = new Vue(
el: '#app',
router: new VueRouter(routes),
components:
VueWinwheel
);welcome.blade.php
<!DOCTYPE html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" type="image/png" href=" asset('images/FavIcon-64.png') " />
<link rel="stylesheet" href=" mix('/css/app.css') ">
<title>My App with VueWinwheel</title>
</head>
<body>
<div id="app" class="col-xs-12 text-center">
<transition name="slideFade" mode="out-in">
<router-view></router-view>
</transition>
<vue-winwheel /> <!-- This one does work -->
</div>
<script src="/js/app.js"></script>
</body>
</html>MyComponent.vue
<template>
<section class="winwheel-section">
<vue-winwheel /> <!-- This one does not work and makes the warning show in console -->
</section>
</template>
<script>
module.exports =
data: function()
return
</script>router.js
import MyComponent from './components/MyComponent';
export default
mode: 'history',
routes: [
path: '/',
component: MyComponent,
name: 'MyComponent'
]
更新
我已经尝试过@AbdulAzeez Olanrewaju 的建议（并且之前尝试过）。但这在我的 npm vue watch 终端中给了我一个错误：
“在'-!../../../node_modules/babel-loader/lib/index.js??ref--4-0 中找不到导出'default'（导入为'mod'） !../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Spin.vue?vue&type=script&lang=js&'
【问题讨论】：
我觉得你需要在你想使用的vue文件中加上import VueWinwheel from 'vue-winwheel/vue-winwheel'
@AbdulAzeezOlanrewaju，我试过了，给我这个编译错误：“在'-！../../../中找不到导出'默认'（导入为'mod'） node_modules/babel-loader/lib/index.js??ref--4-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ Spin.vue?vue&type=script&lang=js&'
我实际上认为这将是最好的解决方案，但我似乎无法在我的 Vue 文件中导入任何内容。
【参考方案1】：
我找到了答案。
我无法在 MyComponent.vue 中导入 Winwheel，因为我使用了 module.exports。 当我使用导出默认值时，它确实有效。
所以：
<!-- This -->
<script>
export default
data: function()
return
</script>
<!-- Instead of this -->
<script>
module.exports =
data: function()
return
</script>
<!-- Note that I also remove the = after module.exports【讨论】：
【参考方案2】：你可以尝试改变
let app = new Vue(
el: '#app',
router: new VueRouter(routes),
components:
VueWinwheel
);
到
let app = new Vue(
el: '#app',
router: new VueRouter(routes),
components:
'vue-winwheel': VueWinwheel
);
另外我认为你不需要使用 Vue.use(VueWinWheel);
【讨论】：
遗憾的是没有变化。尝试使用和不使用 Vue.use， 是的。和之前一样的警告：[Vue warn]: Unknown custom element:以上是关于Vue 组件工作主 Vue 实例，但不在 Vue Router 组件中的主要内容，如果未能解决你的问题，请参考以下文章
为啥不在 Vue 和 Vue Router 生产环境中渲染我的组件？
Vue 组件显示在本地主机上，但不在使用 Laravel 5.4 的服务器上：Passport