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

我使用的是默认的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>  

现在我在编译

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(…)  

---

我错过了什么？任何提示都将不胜感激。

请在您的

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);

您必须使用

html加载程序

而不是

vue加载程序

npm install html-loader --save-dev

您的

gulpfile.js

（需要更改

加载程序

）：

您的

test component.js

（无需更改，即可继续）：

您的

测试组件模板.html

：（无需更改，即可继续）

或者，只需使用ES2015

import

import TestComponent from './test-component';

Vue.component('test-component', TestComponent);

---

这适用于

.vue

文件。我对组件的

.vue

文件没有任何问题。当我在

html

文件中有组件的模板，而组件的

script

在

.js

文件中时，我遇到了一些问题，我在那里做了

模板：require（'./test component.template.html'）

非常感谢。两天以来我一直在努力解决这个问题。我曾尝试使用

vue html loader

，但没有成功。现在它可以使用

import

语句，但不能使用

Vue.component（'test-component'，require（'./testcomponent'）.default）。仍然在检查我的代码是否有任何拼写错误。很高兴能帮助你，先生@Donkarnash:）我的错，我有一个拼写错误。它既可用于
import
也可用于
Vue.component（'test-component'，require（'./test component'）.default）。再次感谢你。哦，我没注意到！伟大的需要考虑的一点是，我认为使用
html加载程序
比使用
vue加载程序
要快一点。因为
vue加载程序
将尝试解析
模板
、
脚本
、和
样式
标记；而
html加载程序
只会返回
*.template.html
文件中的
html
内容。但是，还是由你决定，先生：）
npm install html-loader --save-dev

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

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

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

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

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

import TestComponent from './test-component';

Vue.component('test-component', TestComponent);