如何在Laravel 5.3中的Vue.js 2.0中的组件中使用外部html模板
我使用的是默认的Laravel 5.3设置--这是Vue.js 2.0的默认配置的全新安装。
使用browserify 5.1和Larave1.x，我可以很容易地定义像这样的组件，并使用Laravel进行编译。
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(…) My app.js main条目文件(默认由Laravel提供)
require('./bootstrap');
Vue.component('test-component', require('./components/test-component'));
const app = new Vue({
//el: '#app',
}).$mount('#app'); 我遗漏了什么？如有任何建议，我们将不胜感激。
回答 2
Stack Overflow用户
发布于 2016-12-13 16:16:01
- 你必须使用
html-loader而不是vue-loader。
npm install html-loader --save-dev
- Your
gulpfile.js(需要更改loader)：
const config ={ module：{ loaders:{ test: /.html$/，loader：'html‘} }；elixir((mix) => { mix.sass('app.scss') .webpack('app.js'，null，null，config)；});
- Your
test-component.js(无需更改，即可使用)：
导出默认模板{：require(‘./
- -
test-component-template.html-.template.html’)}测试您的模板：(无需更改，即可使用)
重要
- 下面是如何定义您的组件：
测试组件(‘
- Using Default-Vue.component’，需要(‘./测试组件’).default)；
-或者，只需使用ES2015 import
从‘./ TestComponent -component’导入组件；Vue.component('test-component'，TestComponent)；
Stack Overflow用户
发布于 2016-12-13 15:48:15
在您的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);https://stackoverflow.com/questions/41115436
复制相似问题
腾讯云开发者
