Vue.js 和 Webpack - 无法安装组件：未定义模板或渲染函数

Question

对于我拥有的一些全局组件，我不断收到以下错误：

Failed to mount component: template or render function not defined.
found in

---> <Paginator>
        <Root>

这是我在 package.json 中的内容：

{
    "version": "1.0.0",
    "scripts": {
       "dev": "cross-env NODE_ENV=development webpack",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
     },
     "dependencies": {
         "vue": "^2.4.4"
      },
      "browserslist": [
          "> 1%",
          "last 2 versions",
          "not ie <= 8"
      ],
      "devDependencies": {
            "babel-core": "^6.26.0",
            "babel-loader": "^7.1.2",
             "babel-polyfill": "^6.23.0",
             "babel-preset-es2015": "^6.24.1",
             "babel-preset-stage-2": "^6.0.0",
             "babel-preset-vue-app": "^1.2.0",
             "babel-plugin-transform-runtime": "^6.0.0",
             "cross-env": "^5.0.5",
             "css-loader": "^0.28.7",
             "file-loader": "^1.1.4",
             "fs": "^0.0.1-security",
             "node-sass": "^4.5.3",
             "sass-loader": "^6.0.6",
             "vue-loader": "^13.0.5",
              "vue-template-compiler": "^2.4.4",
              "webpack": "^3.6.0",
              "webpack-dev-server": "^2.9.1"
           }
      }

在 webpack.config 中，我定义了以下内容：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
 },

这是我的主要 js 文件：

import Vue from 'vue';

Vue.component('paginator', require('./components/Paginator.vue'));

var vm = new Vue({
     el: '#root',
     data: {}
});

html:

<div id="root>
        <paginator v-bind:total-items="totalItems" v-bind:page-size="query.pageSize" v-bind:page="query.page" v-on:pagechanged="onPageChange"></paginator>

</div>

我为什么会收到此错误有什么想法吗？

当我按如下方式更改代码时似乎可以工作，但是我想将分页器注册为全局组件：

import Vue from 'vue';
import Paginator from './components/Paginator.vue';

var vm = new Vue({
     el: '#root',
     components: {
         'paginator': Paginator
     },
     data: {}
});

这是分页器组件：

 <template>
    <div>
        <div >
            <nav>
                <ul class="pagination">
                    ...
                </ul>
            </nav>
        </div>
    </div>



 </template>


 <script>


 export default {

        props: ['totalItems', 'pageSize', 'page'],

        data: function () {

            return {
                currentPage: 1,
            }

        },
        computed: {
            pages: function () {
                    this.currentPage = this.page;
                    var pageArray = [];
                    var pagesCount = Math.ceil(this.totalItems / this.pageSize); 

                    for (var i = 1; i <= pagesCount; i++)
                        pageArray.push(i);

                    return pageArray;
               }
        },

        methods: {

                changePage: function (page){

                    this.currentPage = page; 
                    this.$emit('pagechanged', page);
                },

                previous: function (){
                    if (this.currentPage == 1)
                        return;

                    this.currentPage--;

                    this.$emit('pagechanged', this.currentPage);
                },

                next: function () {
                    if (this.currentPage == this.pages.length)
                        return; 

                    this.currentPage++;

                    this.$emit('pagechanged', this.currentPage);
                }
            },
    }

Answer 1

我认为这一行是问题所在 - require 组件声明中的内容在我使用它时并没有很好地结束（尽管我没有调查原因）。编辑：有关此信息，请参阅@DecadeMoon 答案。

Vue.component('paginator', require('./components/Paginator.vue'));

推荐方式：

import Paginator from './components/Paginator.vue'
Vue.component('paginator', Paginator);

您还可以执行以下操作之一，这将使 webpack 将模块拆分为一个单独的文件异步下载（这对大型组件很有用）

选项 1：

Vue.component('paginator', () => import('./components/Paginator.vue'));

选项 2：

我有一个包装它的加载函数，因为它允许我传递一个字符串并包装目录而无需多次键入它，但这是我使用的该函数的简单版本：

function load (component) {
  return () => import(component)
}

所以它会变成：

Vue.component('paginator', load('./components/Paginator.vue'));

Answer 2

这是 Webpack 结合 require (CommonJS) 和 import (ES6) 模块导入样式的结果。

我总是推荐使用 ES6 风格的 import 语法。

如果必须使用require，那么需要select默认导入如下：

Vue.component('paginator', require('./components/Paginator.vue').default);
                                                                ^^^^^^^^

我建议改用 ES6 import 语法（这是一种标准化的、非 webpack 特定的语法）：

import Paginator from './components/Paginator.vue';
Vue.component('paginator', Paginator);

import() 语法之所以有效是因为 this issue。如果你希望模块被拆分成一个单独的文件并由 Webpack 异步下载，请只使用 import()。

Vue.js 和 Webpack - 无法安装组件：未定义模板或渲染函数

Vue.js and Webpack - Failed to mount component: template or render function not defined

vue.js

webpack-2