Блог

Я специально запускаю Vue и Golang/Gin, но этот вопрос можно рассматривать в более широком смысле как «запуск JS-фреймворка в потоке шаблонов веб-фреймворка».

Мне было поручено преобразовать несколько сложное приложение Golang/Gin для стартапа в более современное веб-приложение. Как это обычно бывает, приложение Gin слишком сложное, чтобы его можно было сразу преобразовать в СПА-салон с API, поэтому нам приходится по частям исключать отдельные функции. Как и большинство веб-сайтов, все HTML-страницы приложения Gin имеют общий макет с верхним, нижним колонтитулами и боковой панелью, при этом область «содержимое» меняется от страницы к странице. Область содержимого обычно представляет собой статический материал, но во многих представлениях присутствует большое количество пользовательских ванильных JS, которые немного усложняют работу при попытке включить современную структуру JS.

ЧТО я ХОТЕЛ БЫ СДЕЛАТЬ, так это запустить приложение Vue в этом разделе «контент», что кажется простым, но для меня это оказалось немного сложным. Я храню весь свой код представления в подкаталоге репозитория Gin, потому что я не хочу, чтобы код приложения и построение конвейера конфликтовали с существующими активами vanilla JS. По умолчанию приложения Vue строятся в index.html файл, поэтому я попытался просто включить его в качестве шаблона, go Gin не был поклонником этого и продолжал выдавать мне ошибку, что шаблон не может быть найден

Я думаю, что лучшим решением, вероятно, будет скомпилировать мое приложение Vue в index.js файл, который нацелен на элемент в шаблоне по идентификатору и запускает там приложение Vue. Тогда я мог бы просто включить этот файл JS в тег сценария в шаблоне.

Что меня останавливает, так это то, что я немного перегружен webpack/babel/JS конвейером сборки, поэтому я не совсем уверен, как мне следует это делать или какие инструменты я должен использовать, чтобы это произошло. Я изучал «загрузчик vue», который, по-видимому, по крайней мере частично соответствует тому, что я хочу (транспилировать Vue в чистый JS), но я все еще немного чешу голову.

Любая помощь будет признательна. Я постарался как можно яснее изложить свою проблему здесь, но рад ответить на любые последующие вопросы. Прилагается наглядное пособие о том, чего я хотел бы достичь. Спасибо вам и счастливого кодирования!

Вот диаграмма, показывающая, что я хотел бы сделать

Чего я пытаюсь достичь:

Мне удалось заставить его работать с помощью vue-загрузчика и webpack, скомпилировав мое приложение в один index.js файл с точкой входа, которая выглядит следующим образом:

 import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#webapp')
 

затем вызов в шаблоне, подобном этому:

 <div id="webapp">Failed to load Vue</div>

<script src=/webapp/dist/index.js></script>
 

Это работает только в том случае, если тег сценария находится ПОСЛЕ div, или Vue не сможет найти элемент.
Мне также пришлось добавить следующее в main.go, чтобы он мог читать JS

 r.Static("/webapp", "./webapp")
 

В общем, в конечном итоге это оказалось довольно простым решением, мелочи конфигурации просто подняли меня!
Я уверен, что столкнусь с какой-нибудь проблемой при запуске этого в производство, но это завтрашняя проблема