Question

我正在使用默认的Laravel 5.3设置 - 一个全新安装，默认配置为Vue.js 2.0。

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

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似乎更好）。但我无法使配置正常工作。

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

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时没有收到任何错误，但是当我尝试在浏览器中查看该页面时，它没有显示该组件并且在控制台中有错误/警告

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提供）

require('./bootstrap');

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

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

我错过了什么？任何指针都会受到赞赏。

Answer 1

您必须使用html-loader代替vue-loader。
```
npm install html-loader --save-dev
```

您的gulpfile.js（需要更改loader）：

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

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

你的test-component.js（没有变化，你很高兴）：

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

你的test-component-template.html :(没有变化，你很高兴）

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

重要

以下是如何定义组件：

使用默认

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

或者，只需使用ES2015 import

import TestComponent from './test-component'; Vue.component('test-component', TestComponent);

Answer 2

在gulp文件中尝试此操作：

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

 elixir(mix => {
     mix.webpack('app.js');
 });

并导入您的组件：

import Test from './Components/Test.vue';

Vue.component('test', Test);

如何在Laravel 5.3中的Vue.js 2.0组件中使用外部html模板

2 个答案: