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

Posted 2023-02-24

【中文标题】如何在 Laravel 5.3 中使用带有 Vue.js 2.0 的组件中使用外部 html 模板

【英文标题】：How to use external html templates in Components with Vue.js 2.0 in Laravel 5.3

【发布时间】：2017-04-28 04:18:51

【问题描述】：

我正在使用默认的 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');  

我错过了什么？任何指针将不胜感激。

【参考方案1】：

在您的 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);

【讨论】：

这适用于.vue 文件。我对组件的 .vue 文件没有任何问题。当我在 htmlfile 中有组件的模板而组件的 script 在 .js 文件中时，我遇到了问题，我从该文件中执行 template:require('./test-component.template.html')

【参考方案2】：

您必须使用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);

【讨论】：

非常感谢。自两天以来，我一直在为此苦苦挣扎。我曾尝试使用vue-html-loader，但没有奏效。现在它与import 语句一起使用，但不适用于Vue.component('test-component', require('./test-component').default);。仍在检查我的代码是否有任何拼写错误。

很高兴为您提供帮助，@Donkarnash 先生 :)

我的错，我有一个错字。它适用于import 和Vue.component('test-component', require('./test-component').default);。再次感谢您。

哦，我没注意到！伟大的！一个考虑因素，我认为使用html-loader 比使用vue-loader 快一点。因为vue-loader会尝试解析template、script和style标签；而html-loader 只会返回您的*.template.html 文件中的html 内容。但是，这一切都取决于您，先生 :)