Question

为什么我使用vue js不断收到此错误是什么原因

front.js:43404 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Other>
       <Root>

我的文件位于此处

resources\js\front.js

组件示例组件

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

有内容

require('./bootstrap');

window.Vue = require('vue');

Vue.component('other', require('./components/ExampleComponent.vue'));

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

和刀片文件resources\views\front\book\show.blade.php

中

我有类似

                    <form class="" action="{{ route('book.store') }}" method="post">
                        @csrf

                        <other></other>

                        @include ('front/book/booking-steps/first')

                        @include ('front/book/booking-steps/second')

                        @include ('front/book/booking-steps/third')

我的package.json

{
    "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",
        "browser-sync": "^2.24.7",
        "browser-sync-webpack-plugin": "2.0.1",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.8",
        "laravel-mix-merge-manifest": "^0.1.1",
        "lodash": "^4.17.5",
        "vue": "^2.5.21"
    },
    "dependencies": {
        "buefy": "^0.7.1",
        "bulma": "^0.7.1",
        "bulma-calendar": "^5.0.3",
        "bulma-carousel": "^3.0.0",
        "bulma-steps": "^2.2.1",
        "bulma-tooltip": "^2.0.2",
        "datatables.net": "^1.10.19",
        "datatables.net-autofill": "^2.3.1",
        "dateformat": "^3.0.3",
        "easy-autocomplete": "^1.3.5",
        "node-sass": "^4.11.0",
        "sass": "^1.15.2",
        "sweetalert2": "^7.32.4",
        "toastr": "^2.1.4"
    }
}

webpack

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    // .js('Modules/SidebarMenu/Resources/assets/js/jquery.nestable.js', 'public/js') // Task 86 - murag wala mani na gamit
    .js('resources/js/toastrconf.js', 'public/js')
    .js('resources/js/front.js', 'public/js')
    .js('resources/js/collection/booking-page.js', 'public/js')
    .js('resources/js/book.js', 'public/js')
    .copy('node_modules/datatables.net/js/jquery.dataTables.min.js', 'public/js')
    .copy('node_modules/easy-autocomplete/dist/jquery.easy-autocomplete.min.js', 'public/js')
    .copy('Modules/SidebarMenu/Resources/assets/js/jsfunctions.js', 'public/js')
    .js('Modules/Profile/Resources/assets/js/profilefunction.js', 'public/js')
    .copy('Modules/SystemUsers/Resources/assets/js/systemusers.js', 'public/js')
    .copy('Modules/Reservations/Resources/assets/js/reservations.js', 'public/js')
    .copy('Modules/ManageHotel/Resources/assets/js/managehotel.js', 'public/js')
    .js('Modules/Marketing/Resources/assets/js/marketing-reservation.js', 'public/js')
    .copy('Modules/Modules/Resources/js/module.js', 'public/js')
    .js('Modules/SidebarMenu/Resources/assets/js/sidebarmenu.js', 'public/js')
    .copy('resources/js/global.js', 'public/js')
    .copy('node_modules/sweetalert2/dist/sweetalert2.min.js', 'public/js')
    .copy('node_modules/toastr/toastr.js', 'public/js')
    .copy('node_modules/bulma-carousel/dist/js/bulma-carousel.min.js', 'public/js')
    .copy('node_modules/easy-autocomplete/dist/easy-autocomplete.min.css', 'public/js')
    .copy('node_modules/sweetalert2/dist/sweetalert2.min.css', 'public/css')
    .copy('node_modules/bulma-calendar/dist/css/bulma-calendar.min.css', 'public/css')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/front.scss', 'public/css');

/*
Do the versioning only when running on production
not necessarilly on development
*/
if (mix.inProduction()) {
  mix.version();
}

/*
Please refer to https://laravel.com/docs/5.6/mix#browsersync-reloading for
explanation

note: process.env.MIX_SENTRY_DSN_PUBLIC is defined in .env
look for MIX_SENTRY_DSN_PUBLIC
*/
mix.browserSync('process.env.MIX_SENTRY_DSN_PUBLIC');

我也尝试过使用laravel进行全新安装，并且在相同的安装环境下也能正常工作，我想知道为什么它不适用于我的工作项目。

一遍又一遍地解决这个问题。无法安装组件：模板或渲染功能未定义

0 个答案: