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

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

1. 你必須使用html-loader而不是vue-loader。

   npm install html-loader --save-dev 
   

2. 你gulpfile.js（需要改變loader）：

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

3. 你test-component.js（無變化，你是好去）：

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

4. 你test-component-template.html ：（沒有變化，你很好走）

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

重要

下面是如何定義你的組件：

• 使用默認

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

• 或者，簡LY使用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);