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>

为什么我得到这个错误的任何想法？

当我按如下方式更改代码似乎有效时，我想将paginator注册为全局组件：

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，则需要选择默认导入，如下所示：

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 - 无法挂载组件：模板或渲染函数未定义

2 个答案: