Question

我在Vue组件方面遇到问题。编译很好，但是当我尝试预览页面时，出现以下错误：

[Vue警告]：无法装入组件：模板或渲染函数未定义。

app.js

require('es6-promise').polyfill();
require('./bootstrap');
import PM from './class.pm.js';
import Validator from './class.Validator.js';
import 'jquery-ui/ui/widgets/autocomplete.js';
import 'select2/dist/js/select2.full.js';
window.Vue = require('vue');

Vue.component('terms', require('./components/legal/terms.vue').default);

package.json

{
  "name": "responseconcepts",
  "version": "1.0.0",
  "description": "Responseconcepts",
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18.1",
    "bootstrap": "^4.4.1",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^5.1",
    "fontfacegen": "^0.3.1",
    "gifsicle": "^4.0.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "~2.5.2",
    "gulp-concat-css": "^2.2.0",
    "gulp-css-rebase-urls": "0.0.5",
    "gulp-debug": "^2.1.2",
    "gulp-filenames": "^4.0.1",
    "gulp-fontgen": "^0.2.5",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^6.2.0",
    "gulp-livereload": "^4.0.2",
    "gulp-load-plugins": "^2.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-uglifyjs": "~0.6.1",
    "gulp-watch": "^5.0.1",
    "html-loader": "^0.5.5",
    "imagemin-jpeg-recompress": "^6.0.0",
    "imagemin-pngquant": "^8.0.0",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "laravel-mix": "^5.0.0",
    "lodash": "^4.17.15",
    "map-stream": "0.0.7",
    "minimist": "^1.2.0",
    "popper.js": "^1.12",
    "resolve-url-loader": "^3.1.0",
    "sass-loader": "^8.0.0",
    "ttf2woff2": "^3.0.0",
    "vue": "2.5.17",
    "vue-template-compiler": "2.5.17"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.6.3",
    "codemirror": "^5.43.0",
    "es6-promise": "^4.2.6",
    "font-awesome": "^4.7.0",
    "natives": "^1.1.6",
    "node-sass": "^4.10.0",
    "select2": "github:select2/select2",
    "spectrum-colorpicker": "github:bgrins/spectrum",
    "summernote": "^0.8.11"
  }
}

我认为我现在已经搜索了大约4-5个小时，看到的文章都说我应该在require语句后添加“ .default”。我做到了但是它仍然不断给我同样的错误。

更新以显示条款。vue

<template>
    <div class="modal" id="modal-terms-and-conditions" tabindex="-1" role="dialog"
         aria-labelledby="modal-terms-and-conditions">
        <div class="container">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body" v-html="html"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            html: String
        }
    };
</script>

<style lang="scss">
    #modal-terms-and-conditions {
        .modal-body {
            @media (max-width:991px) {
                height: 86vh;
                overflow-y: scroll;
            }
        }
    }
</style>

Answer 1

您是否挂载了Vue应用程序？您的app.js文件中缺少该代码。

var app = new Vue({
    el: '#app',    
});

编辑2

使用import语法

import Terms from './components/legal/terms.vue';
Vue.component('terms', Terms);

Vue无法安装组件：模板或渲染功能未定义

1 个答案: