Laravel - [Vue 警告]：无法挂载组件：未定义模板或渲染函数
[英]Laravel - [Vue warn]: Failed to mount component: template or render function not defined
问题描述
So I'm creating my first SPA in Laravel, along with vue.
所以我正在 Laravel 中创建我的第一个 SPA，以及 vue。 I decided to use Laravel mix instead of webpack and it seems to have broken for me, I now receive我决定使用 Laravel mix 而不是 webpack，它似乎对我来说已经坏了，我现在收到了
[Vue warn]: Failed to mount component: template or render function not defined.
Seems to happen when I add <router-view></router-view> .当我添加<router-view></router-view>时似乎会发生。
I've tried the "solution" of adding .default , didn't work.我已经尝试了添加.default的“解决方案”，但没有奏效。
export default new VueRouter({
routes: [
{
path: '/',
component: require('./views/Home.vue').default
},
{
path: '/about',
component: require('./views/About.vue').default
}
]
});
app.js:应用程序.js：
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router,
});
bootstrap.js:引导程序.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:路线.js：
import VueRouter from 'vue-router';
export default new VueRouter({
routes: [
{
path: '/',
component: require('./views/Home.vue')
}
]
});
HTML (welcome.blade.php): 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>
3 个解决方案
解决方案1
0 2019-04-09 06:45:54
From bootstrap.js delete import VueRouter from 'vue-router';从 bootstrap.js 中删除import VueRouter from 'vue-router'; and Vue.use(VueRouter);和Vue.use(VueRouter); and add Router plugin to Vue inside of routes.js file and edit it as below:并在routes.js文件中将Router 插件添加到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 is correct. app.js是正确的。 I have implemented and tested this everything worked as expected.我已经实现并测试了这一切都按预期工作。
解决方案2
0 2021-04-27 12:37:54
This is what I did to fix my own issue.这就是我为解决自己的问题所做的工作。
Add .default to require('./components/ExampleComponent.vue') Like so require('./components/ExampleComponent.vue').default添加.default到require('./components/ExampleComponent.vue')就像require('./components/ExampleComponent.vue').default
解决方案3
0 2021-06-29 04:59:29
Replace all webpack resolve aliases with relative paths用相对路径替换所有 webpack 解析别名
I stubmled across an issue where the the webpack [chunkhash] placeholder in the output.chunkFilename webpack option causes an issue我偶然发现了一个问题，即 output.chunkFilename webpack 选项中的 webpack [chunkhash] 占位符导致问题
Modifying webpack optimization.splitChunks.chunks option修改 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');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.