Laravel 5.3에서 Vue.js 2.0 구성 요소에서 외부 html 템플릿을 사용하는 방법

Laravel 5.3에서 Vue.js 2.0 구성 요소에서 외부 html 템플릿을 사용하는 방법

나는 Vue.js 2.0에 대한 기본 구성의 새로운 설치인 기본 Laravel 5.3 설정을 사용하고 있다.

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더 나은 것 같다.하지만 구성이 제대로 되지 않는다.

여러 가지 구성을 시도해 보았지만, 마침내 이것을 내 입에 담았다.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');  

제가 무엇을 빠뜨리고 있나요?어떤 조언이라도 고마워할 것이다.

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 Goes Here</h1>
   </div>
   

중요

5. 구성 요소를 정의하는 방법:

   • 기본값 사용

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

   • 또는 ES2015를 간단히 사용import

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

이것을 당신의 것으로 해 보십시오.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);

참조URL: https://stackoverflow.com/questions/41115436/how-to-use-external-html-templates-in-components-with-vue-js-2-0-in-laravel-5-3