使用Vue 2.0处理SPA。我通过Laravel Elixir,laravel-elixir-webpack-official和laravel-elixir-vue-2将我的所有模板与来自.vue文件的Webpack捆绑在一起。我已经回顾了几乎所有关于此问题的问题,其中大部分都是指需要单独构建或在gulpfile中调用elixir
函数两次,这些都不适用于我理解的。
完整控制台错误:
[Vue warn]: Failed to mount component: template or render function not defined.
(found in anonymous component at E:\dev\project\resources\assets\js\App.vue)
main.js:
import Vue from 'vue';
var VueResource = require('vue-resource');
Vue.use(VueResource);
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import { sync } from 'vuex-router-sync'
import store from './vuex/store';
import Home from './views/home.vue';
import Toast from './views/toast.vue';
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/toast',
name: 'toast',
component: Toast
}
]
const router = new VueRouter({
routes: routes
});
sync(store, router) // done.
import App from './App.vue'
new Vue({
name: 'app',
el: '#app',
store,
router,
render(h) {
return h(App)
}
});
App.vue:
<script>
// App.js
import Header from './components/Header.vue'
import Loading from './components/Loading.vue';
import Messenger from './components/Messenger.vue';
export default {
components: {
Header, Loading, Messenger
}
}
</script>
<template>
<div>
<header></header>
<router-view></router-view>
<loading></loading>
<messenger></messenger>
</div>
</template>
网站通过刀片模板加载,非常简单:
<body>
<div id="app">
</div>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="/js/main.js"></script>
</body>
所有这些,我几乎可以肯定我不需要独立构建。任何人都可以帮我弄清楚这里有什么问题吗?
更多信息
如果我打开Vue devtools,我可以看到根应用程序组件。下面是一个单独的匿名组件,上面有$route
。就是这样。
Gulpfile
var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('elixir-tinypng');
require('laravel-elixir-webpack-official');
var env = require('./env.json');
elixir(function(mix) {
// Image optimization
if(env.tinyPngApiKey) {
mix.tinypng({
key:env.tinyPngApiKey,
sigFile:'.tinypng-sigs',
log:true,
summarize:true
});
// Copy all non compressible images to build
mix.copy('assets/img/*.!(png|jpg)', 'resources/img');
} else {
mix.copy('assets/img/*', 'resources/img');
}
mix.copy('node_modules/font-awesome/fonts', 'public/fonts')
.sass('app.scss')
.webpack('main.js')
.browserSync({
proxy: 'project.dev'
});
});
答案 0 :(得分:0)
这个错误通常来自于引入默认的vue.common.js,它不包含vue的模板解析器。如果您将Vue导入更改为:
import Vue from 'vue/dist/vue.js'
这样可以解决吗?
如果确实如此,那么您的Elixir设置就会出现问题。如果设置正确,laravel-elixir-vue-2
应该是对此版本的别名。您还没有发布您的gulp文件,但它应该如下所示:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
mix.sass('app.scss')
.webpack('main.js')
})
再次查看你的gulp和main.js文件,我发现你似乎在要求的文件之间存在差异。我假设这是问题的来源 - 您可能安装了错误版本的Vue或其中一个软件包。
&#39; vuex路由器同步&#39;这是我建议这一点的主要原因,因为它不支持Vue或Vuex的v2,这可能会产生重大变化。
在旁注中,您的gulpfile中不需要require('laravel-elixir-webpack-official')
。
为了解决问题,我可能会建议单独重新安装laravel,以便比较你的package.json,main.js&amp; gulpfile。
根据您的最新评论,您编辑的错误是由错误地引用图片位置引起的。
如果您使用最新版本的laravel,那么您有2个默认选项来存储图像。将它们放在resources/assets
内的images
目录中。或者将它们再次放在storage/app/public
images
目录中。
第一个位置:resources/assets
然后由webpack处理,并且在编译时将缩小,散列并将这些图像复制到:public/img
。要在Vue应用程序中引用任何这些图像,只需从您正在使用的文件中解析它们的路径,即
# resources/assets/js/components/example.vue
<img src="../../images/logo.png">
指向resources/assets/images/logo.png
如果你想提供静态图像(没有散列,缩小等等),那么只需将它们放在storage/app/public/images
中并引用它们就像:
<img src="/images/logo.png">
答案 1 :(得分:0)
由于您使用的是ES2015,因此您可以这样做:
new Vue({ // eslint-disable-line no-new
name: 'app',
el: '#app',
render: (h) => h(App),
router
});
render
是一个对象属性,它是一个函数。你拥有的是有效的Javascript语法,但它不是VueJs设置你的vue实例所需的签名。