如何在Laravel 5.3中的Vue.js 2.0中使用组件中的外部html模板 [英] How to use external html templates in Components with Vue.js 2.0 in Laravel 5.3

问题描述

我正在使用默认的Laravel 5.3设置-带有Vue.js 2.0默认配置的全新安装.

I am using the default Laravel 5.3 setup - a fresh install with default configuration for Vue.js 2.0.

使用Laravel 5.1和Vue.js 1.x，我可以轻松定义类似的组件并使用browserify进行编译.

With Laravel 5.1 and Vue.js 1.x, I could easily define components like and used browserify to compile.

Vue.component('test-component', require('./test-component');  

/*  test-component.js */
export default{
    template:require('./test-component.template.html')
}

/* test-component.template.html  */
<div class="test-component">
    <h1> Test Component <h1>
</div>  

但是，对于Vue 2，默认值为webpack(尽管browserify也可用，但无法正常工作，webpack似乎更好).但是我无法使配置正常工作.

However, with Vue 2, the default is webpack (although browserify is also available but could not get it working and webpack seems better). But I am not able to get the configuration working.

我尝试了各种配置，最后在gulp.js文件中有了它

I have tried various configurations, finally I have this in my gulp.js file

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2'); 

var config = {

    module:{
        loaders:[
            {
                test: /\.html$/,
                loader: 'vue-loader'
            }
        ]
    }
};
elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js',null, null, config);
});  

现在，在编译gulp webpack时没有出现任何错误，但是当我尝试在浏览器中查看页面时，它没有显示该组件，并且在控制台中出现了错误/警告

Now I am not getting any errors while compiling gulp webpack however when I try to view the page in the browser, it doesn't show the component and has an error/warn in the console

vue.js?3de6:513[Vue warn]: invalid template option:[object Object] 
(found in component <test>)

vue.js?3de6:4085Uncaught TypeError: Cannot read property 'child' of null(…)  

我的 app.js 主条目文件(默认为Laravel提供)

My app.js main entry file (default provided by Laravel)

require('./bootstrap');

Vue.component('test-component', require('./components/test-component'));

const app = new Vue({
    //el: '#app',
}).$mount('#app');  

我想念什么?任何指针将不胜感激.

What am I missing? Any pointers would be appreciated.

推荐答案

1. 您必须使用html-loader而不是vue-loader.

npm install html-loader --save-dev

您的gulpfile.js(需要更改loader):

Your gulpfile.js (need to change the loader):

const config = {
  module: {
    loaders:[{
      test: /\.html$/,
      loader: 'html'
    }]
  }
};

elixir((mix) => {
  mix.sass('app.scss')
    .webpack('app.js', null, null, config);
});

您的test-component.js(无需更改，您就可以使用了):

Your test-component.js (no changes, you're good to go):

export default {
  template: require('./test-component.template.html')
}

您的test-component-template.html :(无需更改，您就可以使用了)

Your test-component-template.html: (no changes, you're good to go)

<div class="test-component">
  <h1>Test Component Goes Here</h1>
</div>

重要

1. 以下是定义组件的方法:

1. Here's how to define your component:

• 使用默认值

• Using Default

Vue.component('test-component', require('./test-component').default);

或者，只需使用ES2015 import

import TestComponent from './test-component';

Vue.component('test-component', TestComponent);

这篇关于如何在Laravel 5.3中的Vue.js 2.0中使用组件中的外部html模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！