Question

使用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'
      });
});

Answer 1

这个错误通常来自于引入默认的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。

修复webpack中的图像引用

根据您的最新评论，您编辑的错误是由错误地引用图片位置引起的。

如果您使用最新版本的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">

Answer 2

由于您使用的是ES2015，因此您可以这样做：

new Vue({ // eslint-disable-line no-new
  name: 'app',
  el: '#app',
  render: (h) => h(App),
  router
});

render是一个对象属性，它是一个函数。你拥有的是有效的Javascript语法，但它不是VueJs设置你的vue实例所需的签名。

Vue 2.0 - 无法安装组件：尽管已定义渲染函数

2 个答案:

修复webpack中的图像引用