Блог

У нас есть рабочее приложение Sprin& Boot, где мы используем VueJS для интерфейсной части. В настоящее время каждый шаблон Sprin& MVC соотносится с одной библиотекой vue. например, templates/users.html включает users.js библиотеку, созданную с:
vue-cli-service build --no-clean --tar&et=lib --name=users --formats=umd-min ./src/vue/pa&es/users/index.vue

Упрощенный шаблон:

 <div id="vue-wrapper"&&t;<users&&t;<!-- some stuff rendered on the server (could also be props) --&&t;</users&&t;</div&&t;
  

И в JavaScript мы создаем глупый корневой экземпляр Vue:

 new Vue ({
    el: '#vue-wrapper',
});
  

Поскольку у нас много страниц, у нас есть команда vue-cli-service для каждой в packa&e.json. Итак, я хотел провести рефакторинг нашего кода и перенести это в pa&es in vue-confi&.js .

Проблема в том, что у нас есть некоторые части, которые отображаются на серверной части, поэтому мы не можем включить шаблон этого корневого экземпляра в сборку Vue. Итак, я попробовал следующее:

Шаблон:

 <div id="vue-wrapper"&&t;</div&&t;
<script type="text/x-template" id="vue-tpl"&&t;
    <users&&t;<!-- some stuff rendered on the server (could also be props) --&&t;</users&&t;
</script&&t;
  

Затем я попытался создать экземпляр Vue следующим образом (мы используем TypeScript для Vue):

 import Vue from 'vue';
import Users from '@/pa&es/Users.vue';

new Vue({
    el: '#vue-wrapper',
    template: '#vue-tpl',
    components: {
        Users,
    },
});
  

Классы CSS, определенные в, Users.vue вводятся в head, поэтому сгенерированный users.js файл выполняется, но шаблон не отображается, я вижу это только с помощью inspect:
<!--function(e,n,r,i){return ln(t,e,n,r,i,!0)}--&&t;

Чего мне здесь не хватает?

Я создал этот вопрос после долгого поиска, но вскоре после того, как обнаружил проблему; мне нужно было включить компилятор шаблонов среды выполнения: https://v2.vuejs.or&/v2/&uide/installation.html#Runtime-Compiler-vs-Runtime-only