Как лучше всего обрабатывать текст stati c в таких интерфейсах, как Vue. js

Question

Я работаю над веб-приложением, которое использует Vue. js в качестве основы веб-интерфейса. В настоящее время мы обрабатываем текст c непосредственно там, где он используется, т.е. вводим его непосредственно в источнике в данных компонентов.

<script>
    export default {
        name: "ExampleComponent",
        data: function () {
            return {
              title: 'Business Title',
              modalBodyText: 'Some business text that devs don't care about'
            }
        }
    }
</script>

Однако веб-приложение требует от бизнес-команды большого вклада в то, как все сформулировано и как сформулирован текст. Из-за соответствия часть текста в приложении часто меняется, и мне интересно, есть ли лучший способ обработки текста stati c в инфраструктурах внешнего интерфейса, таких как Vue. js?

Я чувствую, что мы должны абстрагироваться от текста кода c и импортировать файл глобально, но я не уверен, является ли это обычной практикой или как лучше это сделать. Любой вклад в это будет высоко ценится.

Answer 1

Самое простое, что вы можете сделать, это создать какой-нибудь файл json (или несколько файлов ... в зависимости от размера и структуры вашего приложения) со всеми текстами и просто импортировать его в свои компоненты

import content from './content.json'

Webpack сделает содержимое такого файла доступным как объект JS, чтобы вы могли легко ссылаться на ключи в вашем коде (не напрямую из шаблона tho)

Чуть более изощренным способом было бы использовать библиотеки I18n, такие как vue-i18n - сохраняя ваш текст в отдельных json файлах с некоторыми утилитами сверху для доступа к нему непосредственно из шаблонов - но с возможностью изменения механизмов хранения текста позже и использования множества инструментов с открытым исходным кодом, доступных для управления и изменения контента без пользователи-разработчики ...