如何最好地处理 Vue.js 等前端框架中的静态文本

Question

我正在开发一个使用 Vue.js 作为前端框架的 Web 应用程序。目前，我们在使用静态文本的地方直接处理静态文本，即直接在组件数据的源中输入它。

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

但是，Web App 需要业务团队就事物的措辞方式和文本的措辞方式提供大量输入。由于合规性，应用程序中的一些文本经常更改，我想知道是否有更好的方法来处理 Vue.js 等前端框架中的静态文本？

我觉得我们应该从代码中抽象出静态文本并全局导入一个文件，但我不确定这是否是常见做法或如何做到最好。对此的任何输入将不胜感激。

Answer 1

您可以做的最简单的事情是创建一些 json 文件（或多个文件...取决于您的应用程序的大小和结构），并将所有文本简单地导入到您的组件中

import content from './content.json'

Webpack 会将此类文件的内容作为 JS 对象提供，因此您可以轻松地在代码中引用键（不是直接来自模板）

稍微复杂一点的方法是使用像 vue-i18n 这样的 I18n 库——仍然将你的文本保存在单独的 json 文件中，上面有一些实用程序可以直接从模板访问它——但是有一个稍后更改文本存储机制的选项，并使用许多可用于管理和更改非开发人员用户的内容的开源工具...

如何最好地处理 Vue.js 等前端框架中的静态文本

How best to handle static text in frontend frameworks such as Vue.js

frontend

web-frontend

vue.js

vuejs2