Question

所以我要在Laravel和vue中创建我的第一个SPA。我决定使用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>

Answer 1

从bootstrap.js中删除import VueRouter from 'vue-router';和Vue.use(VueRouter);，然后将Router插件添加到 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 是正确的。我已经实现并测试了这一切，一切正常。

Answer 2

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

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

Answer 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');

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

3 个答案: