[Vue 警告]：无效的组件定义答案

【问题标题】：[Vue warn]: Invalid Component definition[Vue 警告]：无效的组件定义
【发布时间】：2018-09-22 06:39:55
【问题描述】：

我刚刚在 GoDaddy 上创建了一个 Vue 站点，这是链接：http://picmymenu.com/ 通过简单地导入组件，我不断收到警告/错误。这是我的 app.js：

Vue.component('nav-bar', 'navbar.vue')
Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
})
var app = new Vue({1
    el: '#app',
    data: {
        message: 'Pic-My-Menu!'
    }
});

这是我得到的：

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
vue.js:597 [Vue warn]: Invalid Component definition: navbar.vue

(found in <Root>)
warn @ vue.js:597
createComponent @ vue.js:4204
_createElement @ vue.js:4414
createElement @ vue.js:4351
vm._c @ vue.js:4483
(anonymous) @ VM4739:3
Vue._render @ vue.js:4535
updateComponent @ vue.js:2788
get @ vue.js:3140
Watcher @ vue.js:3129
mountComponent @ vue.js:2795
Vue.$mount @ vue.js:8527
Vue.$mount @ vue.js:10926
Vue._init @ vue.js:4627
Vue @ vue.js:4716
(anonymous) @ app.js:6
backend.js:1  vue-devtools  Detected Vue v2.5.17

在我的 app.js 中，我仅出于测试目的定义了一个名为“todo-item”的组件，它工作得很好，但是，在文件中插入相同的代码会出现此警告/错误。这是我的组件内容“navbar.vue”：

<template>
    <div>
        <nav>
            <div class="container">
                <a href="#" class="navbar-brand">PiCMyMenu</a>
            </div>
        </nav>
    </div>
</template>

有什么想法吗？谢谢

【问题讨论】：

你在使用 Vue CLI（或 Webpack）吗？
不，我不是，它托管在 godaddy

标签： vue.js

【解决方案1】：

 import navbar from 'navbar.vue';
 Vue.component('nav-bar', navbar)

您正在使用字符串定义一个组件，但它需要一个对象

【讨论】：

谢谢，但我得到了“未捕获的语法错误：意外的标识符”。我猜它指的是“进口”。如果你想检查，它在网站上
你在使用捆绑软件吗？
不，我不是，只是带有 bootstrap 和 vue cdn 链接的纯 html

【解决方案2】：

如果您想使用 .vue 文件，您应该使用Vue CLI（建议）或Webpack 创建您的项目，它们会编译它并创建一个“dist”文件夹，其中包含您可以在 GoDaddy 上部署的文件。

浏览器本身无法识别导入命令。

【讨论】：

但是为什么我不能使用 Vue.component('nav-bar', 'js/components/navbar.vue')
因为这样你分配了一个字符串。每次您需要加载另一个文件（模块）时，您都必须使用 import 或 require 命令（以及编译这些指令的捆绑器）