我和一位同事在使用vue js时遇到了新旧laravel项目的问题，因为我们每次在浏览器控制台中都会收到以下错误
>`[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Example>
<Root>
warn @ app.js:32173
mountComponent @ app.js:34241
Vue$3.$mount @ app.js:39678
Vue$3.$mount @ app.js:41868
init @ app.js:35260
createComponent @ app.js:36909
createElm @ app.js:36852
createChildren @ app.js:36980
createElm @ app.js:36885
patch @ app.js:37394
Vue._update @ app.js:34147
updateComponent @ app.js:34271
get @ app.js:34614
Watcher @ app.js:34603
mountComponent @ app.js:34275
Vue$3.$mount @ app.js:39678
Vue$3.$mount @ app.js:41868
Vue._init @ app.js:36000
Vue$3 @ app.js:36085
(anonymous) @ app.js:802
__webpack_require__ @ app.js:20
(anonymous) @ app.js:775
__webpack_require__ @ app.js:20
(anonymous) @ app.js:63
(anonymous) @ app.js:66`
即使在使用默认Example.vue
的新laravel项目中也会发生这种情况我目前的代码如下
Example.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
资产/ JS / 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');
/**
* 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.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
资产/ JS / bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
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');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: 'your-pusher-key'
// });
welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{csrf_token()}}">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/app.css">
<!-- Styles -->
</head>
<body>
<div id="app">
<example></example>
</div>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
webpack.mix.js
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/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
的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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"cross-env": "^5.0.5",
"vee-validate": "^2.0.0-rc.17"
}
}
答案 0 :(得分：1)
如果您没有更改任何内容并且已正确捆绑并安装了JavaScript，则问题可能在于默认的Laravel实现。
您收到的错误消息意味着您可能只将运行时构建（不带模板编译器的vue）导入到需要模板编译器的应用程序中。
为了更好地理解这一点，Vue将所有内容编译为渲染函数（本质上是您网页的纯JavaScript表示形式）。使用single file components时，您最终会得到一个安装到Vue实例的基本组件，它会提供您的所有视图，因此，我们会得到这样的结果：
<强>组件/ App.vue
<template>
<div>
I'm a base component
<!-- vue-router will mount components here -->
<router-view></router-view>
</div>
</template>
<强> app.js
import App from './components/App.vue'
// "h" is just a standard taken from JSX
new Vue({
render: h => h(App)
}).$mount("#app");
<强> app.blade.php
<html>
<head>
<!-- head stuff -->
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
这里重要的是，app.blade.php仅作为整个应用程序的安装点，而App.vue作为基本组件，即轮流服务于其他所有视图（这通常通过vue-router）。为了实现这一点，我们需要通过webpack将资产编译到app.js，这将为我们创建所有的渲染函数，因此我们不需要编译器，因为所有内容都已经编译完成。剩下要做的就是在routes/web.php中创建一条路线来提供索引刀片文件。这基本上是建立一个SPA。
Laravel鼓励您做的是直接在您的标记中添加Vue组件并在全局注册组件，所以您可以这样做：
<强> app.js
Vue.component('my-component', require('./components/My-component.vue'));
const app = new Vue({
el: '#app'
});
<强> index.blade.php
<html>
<head>
<!-- head stuff -->
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="app.js"></script>
</body>
</html>
因为我们已经将我们的组件添加到标记中，所以我们需要模板编译器在运行时将app div标记之间的位编译成渲染函数。所以，我们需要导入vue +编译器，这是Laravel Mix 应该通过对runtime + compiler版本的Vue进行别名来为你做的事情（你可以找到如何做到这一点的详细信息{{3 }}）。
说实话，我不是Laravel Mix的粉丝，因为它抽象了重要的实现细节，作为开发人员你需要知道，例如，“Laravel Mix正确地使Vue + compiler别名构建“？”，在你的情况下它看起来不是。
最后，通常更容易直接设置您自己的webpack配置，这样您就可以完全控制配置，您可以使用Vue的in the docs配置作为基础。
一旦你正确设置了webpack，你就需要在webpack配置中添加别名，并且你的runtime + compiler内置了：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
我意识到我并没有真正对你的具体问题给予灵魂。我发现很难相信Webpack Mix没有正确地对vue + compiler构建进行别名，但这就是该消息所暗示的内容。但希望这能为您提供足够的信息来找出问题所在。