Как правильно настроить Vue-extend, когда данные берутся из бд?

Question

[iBird Rose]

Версия vue 2. Стояла задача сделать компонент vue, который должен меняться из бд. Я его реализовал через Vue-extend https://vuejs.org/v2/api/#Vue-extend
Т.е. в template грузится переменная, которая была получена из бд. Она подгружает шаблон из базы, компилирует его и показывает.
Сейчас проблема как это всё комфортно отлаживать.
Как это можно сделать сейчас: берем код из бд, вставляем в компонент делаем правки, записываем обратно в базу. А потом при деплое записываем данные из локального бд в продовское.
Что хочется: иметь некий автоматизированный способ для dev режима, чтобы я без проблем мог вносить правки в шаблоны и это без лишних телодвижений уходило и локальную базу и что важнее в базу продакшена.

Как я пытаюсь это реализовать сейчас:
Хочу сделать 2 компонента одинаковых. Назовем их component-dev и component-prod.
В component-dev в template будет обычная строка, которую можно будет дебажить и менять и т.д. И этот компонент будет работать только в dev режиме:
template: '<div></div>',

в component-prod код такой:
template: templateFromDB,
где в переменной templateFromDB лежит та же строка '<div></div>', но подгружается она из бд.

Вот думаю как реализовать такую идею так, чтобы при билде (или другой операции) данные шаблона из component-dev записывались в бд. А потом еще как-то это все перенести и в продовскую бд.
Есть идеи?)

Comments

[Aetae]

Ну можно начать с рефакторинга и выкинуть Vue.compile из продуктовой сборки(т.е. поддержку template на лету) и билдить компоненты заранее в headless(без самой Vue в бандле) компонеты которые и подключать из бд.

Это так, в плане шутки(хотя именно так и надо делать по-хорошему), а по вопросу мало понятно чего вы хотите добиться. По пунтам распишите что было, что вы хотите чтоб стало. Где ТЗ?)

[iBird Rose]

Aetae, есть 2 компонента.
в component-dev код нужного места такой:
template: '<div></div>',
и этот шаблон я в самом vue файле могу менять и т.д.
в component-prod код такой:
template: templateFromDB,
где в переменной templateFromDB лежит та же строка '<div></div>', но подгружается она из бд.

задача в том, чтобы я мог поменять в component-dev шаблон, и после билда и пуша и т.д. данные из моего измененного component-dev записались в бд и в проде оно также заработало нормально

[Aetae]

iBird Rose, это какбэ процесс деплоя, vue тут не особо при чём.

Общее: пишешь плагин для webpack, который: перед билдом запускает написанный кастомный babel-transform(край - регулярки, но лучше не надо), который вытащит и сохранит строки templete и заменит их на получение из bd,
Если билд на ci\cd сервере - плагин перед завершением билда запулит сохранённе строки в bd.
Если билд у тебя на машине - плагин просто сохранит эти строки в удобный для машинной обработки файлик, а у тебя самого пост-пуш(или пре-пуш) хук запулит этот файлик в бд.

Ну или если дёшево-сердито, без "оно само", ты можешь просто всегда писать:

import getTemplate from '@getTemplate';
template: getTemplate('id/name')

И сделать такой простенький алиас типа:

"@getTemplate":  path.join(__dirname, process.env.NODE_ENV = 'production' ? 'src/getTemplateDB.js' : 'src/getTemplateString.js' )

Где в getTemplateDB лежит код для получения из базы, а в getTemplateString из какого-то файлика\фаликов(тут может пригодиться require.context) с нужными строками которые ты редактируешь в dev на лету.
Ну и после билда, прям в package.json build можешь добавить скрипт который пошлёт твои файлики в бд типа:

"build": "vue-cli-service build && node ./submitToDB.js"

Ну или, опять же, этот node ./submitToDB.js в пост пуш хук.