Хорошо .... вот как мне удалось:
Использовать Vue Cli и все классные инструменты для создания VUE SPA, как обычно
Использовать https://github.com/SolarLiner/vue-cli-plugin-prerender-spa для простой настройки prerender-spa-plugin через vue cli.
Внутри store.js - задайте свое состояние .... это должно напоминать форму ваших данных.
Например:
const state = {
isLoading: false,
products: [
{
name: 'Product 10',
sku: '12345',
price: 300,
stock: 100
}
],
cart: {
}
}
Это «приложение» содержит динамические данные. Поэтому нам нужно обновить клиентскую часть состояния правильными данными. Делать это с помощью Ajax-вызова внутри mounted было бы непростительно, так как мы будем отправлять это с сервера и иметь доступ к исходным данным на сервере ...
Внутри вашего файла main.js,добавьте смонтированный хук:
new Vue({
store,
render: h => h(App),
mounted () {
const configElement = document.getElementById('config')
const config = JSON.parse(configElement && configElement.innerHTML)
const initialState = (config && config.initialState)
if (initialState) {
// Set our initial state here - this will overwrite the state
// in our store with the data we want
this.$store.commit('INIT_STATE', initialState)
}
// You'll need this for renderAfterDocumentEvent.
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
и внутри вашего store.mutations - добавьте мутацию 'INIT_STATE'. Например:
INIT_STATE (state, initialState) {
state.products = initialState
},
Возможно, вы захотите использовать action в своем монтированном - но поскольку операция не асинхронная, я решил просто перейти к мутации.
КогдаВы строите свой проект - в итоге вы получите файл index.html. Внутри index.html добавьте тег сценария JSON над app.js (мы делаем это потому, что не хотим, чтобы браузер думал, что это JavaScript).
Используйте свои серверные шаблоны для «отбрасывания» вначальное состояние как объект JSON. Например,
<script id="config" type="application/json">
{{get_my_initial_data_as_JSON()}}
</script>
<script src="/js/app.67487567.js"></script>
Становится:
<script id="config" type="application/json">
{"initialState":[{"name":"Product 1","sku":"123","price":300,"stock":10},{"name":"Product 2","sku":"234","price":300,"stock":10},{"name":"Product 3","sku":"456","price":300,"stock":10},{"name":"Product 4","sku":"678","price":300,"stock":10}]}
</script>
<script src="/js/app.67487567.js"></script>
Если вы посмотрите исходный код index.html, вы увидите, что ваш html содержит исходные данные, которые были в вашем магазине в Build ({name: product10}и т. д.)
Однако хранилище автоматически обновляется в подключенном хуке, добавляя правильные данные.
Я протестировал, и Google видит и сканирует подключенные данные.
Преимущества:
Обновление начального состояния таким образом означает, что для получения исходных данных не требуется никакой вызов Ajax ... таким образом, время для взаимодействия и загрузка страниц быстрее.
Этот метод удаляет серверный суп из жестких шаблонов vue в серверные шаблоны. Вам не нужно дублировать шаблон на двух языках шаблонов (например, vue и twig или смесь веток для вывода vue). Он распутывает ваше приложение vue из серверной части.
Самым большим преимуществом является возможность использовать инструменты Vue Cli и Webpack, которые раньше было практически невозможно использовать из-за этого серверного супа.
** РЕДАКТИРОВАТЬ **
Подумайте об этом - вы можете просто зайти в /public/index.html и вставить тег сценария JSON над строками
Если вы добавляете метод на стороне сервера, который вы намереваетесьиспользовать, чтобы написать здесь JSON - например:
<script id="config" type="application/json">
{{get_my_initial_data_as_JSON()}}
</script>
У вас нет файлов для редактирования на стороне клиента :) вам просто нужно получить этот файл с вашего сервера - и ваш get_my_initial_data_as_JSON() готовзаселить его.