Как использовать внешние HTML-шаблоны в компонентах с Vue.js 2.0 в Laravel 5.3

Question

Как использовать внешние HTML-шаблоны в компонентах с Vue.js 2.0 в Laravel 5.3

Я использую стандартную настройку 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');

Что мне не хватает? Любые указатели будут оценены.

4

javascript laravel laravel-5.3 php vuejs2

Решение

Другие решения

Попробуйте это в вашем 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);

0

Источник

Accepted Answer

Вы должны использовать 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);

3