how to reference URL into Vue.Component.Template

问题

How to refer URL into Vue.Template link. Template is longer and all operations are going to include to mounted/methods.

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: './views/templatebutton.html'   //how to refer URL here.
})

回答1:

You could read the local HTML file as a string, and then load the result into the template field. With a module loader (such as Webpack), you would use require() to import the HTML file:

// Foo.js
Vue.component('button-counter', {
  template: require('./views/templatebutton.html')
})

Alternatively, if vue-loader is available to your project, you could use single file components, which allow importing the template from an external file:

<!-- Foo.vue -->
<template src="./views/templatebutton.html" />

demo

回答2:

I solve this limitation using requirejs ( although it is not recommended).

You can load the text from html file by adding 'text!' before the template url and load it as text like:

var template = require('text!/assets/vuejs/controllers/venda_direta/cart.html');

and then use it as your template string:

...    
    template : template
...

来源：https://stackoverflow.com/questions/52239513/how-to-reference-url-into-vue-component-template