Laravel - [Vue 警告]：无法挂载组件：未定义模板或渲染函数答案

【问题标题】：Laravel - [Vue warn]: Failed to mount component: template or render function not definedLaravel - [Vue 警告]：无法挂载组件：未定义模板或渲染函数
【发布时间】：2019-08-30 04:12:46
【问题描述】：

所以我在 Laravel 中创建了我的第一个 SPA，以及 vue。我决定使用 Laravel mix 而不是 webpack，它似乎对我来说已经坏了，我现在收到了

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

似乎在我添加<router-view></router-view> 时发生。

我尝试了添加.default的“解决方案”，没有奏效。

export default new VueRouter({
    routes: [
        {
            path: '/',
            component: require('./views/Home.vue').default
        },
        {
            path: '/about',
            component: require('./views/About.vue').default
        }
    ]
});

app.js：

import './bootstrap';
import router from './routes';

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

bootstrap.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';


window.Vue = Vue;
Vue.use(VueRouter);

window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

routes.js：

import VueRouter from 'vue-router';

export default new VueRouter({
    routes: [
        {
            path: '/',
            component: require('./views/Home.vue')
        }
    ]
});

HTML (welcome.blade.php)：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="/css/app.css" type="text/css">
    </head>
    <body>
        <div id="app">
            <router-link to="/">Home</router-link>

            <router-view></router-view>
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>

【问题讨论】：

请提供您的app.js文件
我已经添加了我的 JS 文件。谢谢！
好，你把<router-view></router-view>放在哪里？
这将在我的 Laravel 中的 welcome.blade.php 文件中，就在我的 <router-link to="/">Home</router-link> 下。我也附上了那个代码。
您是否尝试将 view-router 放入 app.vue 并在刀片模板中实例化应用程序组件，例如 <app></app>？

标签： javascript laravel vue.js laravel-mix

【解决方案1】：

从 bootstrap.js 中删除 import VueRouter from 'vue-router'; 和 Vue.use(VueRouter); 并将路由器插件添加到 routes.js 文件中的 Vue 并编辑如下：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
export default new VueRouter({
    routes: [
        {
            path: '/',
            component: require('./views/Home.vue')
        }
    ]
});

app.js 是正确的。我已经实施并测试了这一切都按预期工作。

【讨论】：

【解决方案2】：

这是我为解决自己的问题所做的。

将.default 添加到require('./components/ExampleComponent.vue') 就像这样require('./components/ExampleComponent.vue').default

【讨论】：

【解决方案3】：

用相对路径替换所有 webpack 解析别名

我偶然发现 output.chunkFilename webpack 选项中的 webpack [chunkhash] 占位符会导致问题

修改 webpack optimization.splitChunks.chunks 选项

const mix = require('laravel-mix');
const fs = require('fs');
const webpack = require('webpack');
const tailwind = require('tailwindcss');
const path = require('path');
const glob = require('glob');
const exec = require('child_process').exec;
const pwa = require('sw-precache-webpack-plugin');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js',
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
});

mix.version();

// ...

mix.js('resources/js/app/app.js', 'public/js/app.js');

【讨论】：