时间戳

首页 > 解决方案 > 如何最好地在 Vue.js 等前端框架中处理静态文本

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

问题描述

我正在开发一个使用 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 应用程序需要业务团队就事物的措辞方式和文本措辞方式提供大量输入。由于合规性，应用程序中的一些文本经常更改，我想知道在 Vue.js 等前端框架中是否有更好的方法来处理静态文本？

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

标签： vue.jsvuejs2frontendweb-frontend

解决方案

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

import content from './content.json'

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

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

推荐阅读