我正在使用Laravel Vue设置并使用Laravel Elixir,Webpack和
laravel-elixir-vue-2软件包.
我已经查看了其他几个SO问题,我知道这通常是一个问题,没有引用独立版本的vue.js
但是,laravel-elixir-vue-2软件包将独立版本别名为vue,因此可以从.vue文件加载模板.不过,我每次都会收到此错误：
[Vue:Warn] vue 2.0 Failed to mount component: template or render function not defined. (found in component <top> at ../resources/assets/js/components/top.vue)
我可以看到vue.js正在从控制台中的vue / dist / vue.js？0598：2611中被拉入.
任何人都能看到我错过的东西吗？
app.js
import Vue from 'vue'
import top from './components/top.vue'
new Vue({
el: '#app',components: { top }
})
//I've also tried this:
// new Vue({
// components: {
// top
// },// render: h => h(top),// }).$mount('#app')
top.vue
<template>
<div class="top">
<p>hi</p>
</div>
</template>
<script>
export default {};
</script>
index.blade.PHP
<div>
<div id="app">
<top></top>
</div>
</div>
{!! HTML::script('js/app.js') !!}
的package.json
{
"private": true,"scripts": {
"prod": "gulp --production","dev": "gulp watch"
},"devDependencies": {
"bootstrap-sass": "^3.3.0","gulp": "^3.9.1","laravel-elixir": "^6.0.0-9","laravel-elixir-vue-2": "^0.2.0","laravel-elixir-webpack-official": "^1.0.2"
}
}
gulp.js
var elixir = require('laravel-elixir');
elixir.config.sourcemaps = true;
require('laravel-elixir-vue-2');
elixir(function(mix) {
mix.webpack('app.js','public/assets/js');
});
编辑：更新
更改gulp.js语法修复了我的错误.
var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2')
elixir(mix => {
mix.webpack('app.js');
mix.styles([
"normalize.css","main.css"
]);
});
编辑：我添加了export default {};到模板脚本
解决方法
就像我在问题中的评论一样,我遇到了同样的问题.
在我的情况下,我有两个像这样的长生不老药召唤：
在我的情况下,我有两个像这样的长生不老药召唤：
elixir(mix => {
mix.browserSync({
proxy: 'example.dev',open: false
});
});
elixir(mix => {
mix.sass('app.scss');
mix.webpack('app.js');
});
我不知道为什么,但是两个不老药的电话都打破了webpack.
我将gulpfile更改为：
elixir(mix => {
mix.sass('app.scss');
mix.webpack('app.js');
mix.browserSync({
proxy: 'example.dev',open: false
});
});
编辑：
见这Laravel Elixir Issue
