Laravel + SPA VueJs 未给出未知组件的错误

Question

<template>
    <div>
     <test-component />
    </div>
</template>
<script>
//import TestComponent from '../path-to-components/TestComponent';
export default {
    name: 'SomeRandomComponent',
    components: {
        TestComponent,
    }
}
</script>

Expected Behaviour : The application should give some console error if there is a problem with the imports or anything else similar to this.预期行为：如果导入或其他类似问题存在问题，应用程序应该给出一些控制台错误。

Current Behaviour : The page get blank in the browser and there is no error in console even if the import statement is commented out.当前行为：页面在浏览器中变为空白，即使导入语句被注释掉，控制台也没有错误。

Code for reference参考代码

app.js应用程序.js

import Vue from 'vue';
import router from '~/router';
import App from '~/components/App';

new Vue({
  router,
  ...App
})

router.js路由器.js

export default [
    { path: '/some-path', name: 'testing', component: import( `~/pages/path-to-component`).then(m => m.default || m) },
]

App.vue应用程序.vue

<template>
  <div id="app">
    <loading ref="loading" />
    
    <transition name="page" mode="out-in">
      <component :is="layout" v-if="layout" />
    </transition>
  </div>
</template>

<script>
import Loading from './Loading'
// Load layout components dynamically.
const requireContext = require.context('~/layouts', false, /.*\.vue$/)

const layouts = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
  )
  .reduce((components, [name, component]) => {
    components[name] = component.default || component
    return components
  }, {})

export default {
  el: '#app',

  components: {
    Loading
  },

  data: () => ({
    layout: null,
    defaultLayout: 'default'
  }),

  metaInfo () {
    const { appName } = window.config

    return {
      title: appName,
      titleTemplate: `%s · ${appName}`
    }
  },

  mounted () {
    this.$loading = this.$refs.loading
  },

  methods: {
    /**
     * Set the application layout.
     *
     * @param {String} layout
     */
    setLayout (layout) {
      if (!layout || !layouts[layout]) {
        layout = this.defaultLayout
      }

      this.layout = layouts[layout]
    }
  }
}
</script>

Answer 1

I am assuming that you are using Vue2 since Vue3 is in beta.我假设您使用的是 Vue2，因为 Vue3 处于测试阶段。

The first problem I see with your code, is that your <div id="app"> is inside a Vue component.我在您的代码中看到的第一个问题是您的<div id="app">位于 Vue 组件中。

Declarative Rendering 声明式渲染

What happening is that everything is compile, but you are trying to render Vue inside a component that does not exist.发生的事情是一切都已编译，但您试图在一个不存在的组件中渲染 Vue。

Instead, create a div element inside the html or blade.php file that is loaded by the client.相反，在客户端加载的 html 或 Blade.php 文件中创建一个 div 元素。 For my part, I use a blade layout like this:就我而言，我使用这样的刀片布局：

//resources/views/layouts/app.blade.php

...
</head>
<body>
    <div id="app" v-cloak> //This is plain loaded when client render views, then, when script will initiate, Vue will be able to access everything inside this.
            <navbar v-bind:core="core"></navbar> //There is my navbar which is a Vue component.

            <div class="boxed">
                <div id="content-container">

                    @yield('content') //Blade component are injected there. since it's inside the <div id="app">, thoses component can include Vue directive/component.

                </div>
...

Another thing that seems a problem is that you are initiating Vue inside a Vue component.另一件似乎有问题的事情是您在 Vue 组件中启动 Vue。 Things are that Vue is a package and compiled into javascript in the end.事情是Vue是一个package，最后编译成javascript。 But, to make all the magic happen, you need to have somwhere to initiate all this.但是，为了让所有的魔法发生，你需要有一个地方来启动这一切。 In that case, your App.js file should look something like this:在这种情况下，您的 App.js 文件应如下所示：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

This file is the one created by default by laravel for Vue template on fresh Laravel 8 install.此文件是 laravel 在全新 Laravel 8 安装上为 Vue 模板默认创建的文件。

The difference between import and require is that import create a promise. import 和 require 的区别在于 import 创建一个 promise。

You don't want a promise there, because you want that file to be execute at the moment the client will begin to render your page.您不希望出现 promise，因为您希望在客户端开始呈现您的页面时执行该文件。

Following thoses recommendation, I think you will be able to get your app working quickly and Vue will start logging error into your console.按照这些建议，我认为您将能够让您的应用程序快速运行，并且 Vue 将开始将错误记录到您的控制台中。

Laravel + SPA VueJs 未给出未知组件的错误

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-25 13:25:13

Laravel + SPA VueJs 未给出未知组件的错误

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-25 13:25:13

解决方案1
1 已采纳 2021-03-25 13:25:13