javascript - 使用未捆绑的外部全局变量文件
问题描述
我有一个用于国际化的 JS 文件。我希望能够将此 JS 文件传递给客户端以供他们编辑,而无需我重建整个项目。
目前我将此文件保存在静态文件夹中,以便在构建后将其转移到我的 dist 文件夹中(我使用的是 vue-cli-webpack 模板)。
翻译.js
const messages = {
en: {
message: {
welcome: 'Welcome',
},
},
fr: {
message: {
welcome: 'Bonjour',
},
},
};
export default messages;
我将它导入到我的 main.js 中,如下所示:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App';
import messages from '../static/translation';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
});
/* eslint-disable no-new */
new Vue({
i18n,
el: '#app',
components: { App },
template: '<App/>',
});
虽然在我的开发环境中,这正是我想要的热重载(更改 translation.js 中的字符串并更新我的应用程序),但是一旦我构建了应用程序并将其放在生产站点上,它将不再热重载。
我怎样才能实现这一目标?
解决方案
以下是我实现预期结果的方式:
在我的 Index.html 中,我包含以下静态 js 文件:
<body>
<div id="app"></div>
<script src="/static/translation.js"></script>
<!-- built files will be auto injected -->
</body>
translation.js 文件如下:
const messages = {
en: {
title: {
test_page: 'Test Page Title',
},
},
};
window.messages = messages;
main.js 修改如下:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'en', // set locale
messages: window.messages, // set locale messages
});
/* eslint-disable no-new */
new Vue({
i18n,
el: '#app',
components: { App },
template: '<App/>',
});
这使我可以这样全局使用它:
<template>
<div class="test-parent">
<h1>{{ $t('title.test_page') }}</h1>
</div>
</template>
我对 translation.js 文件所做的任何更改都会显示在生产环境中。
推荐阅读
- html - html/css 文本框格式化
- java - Lottie 错误:“java.lang.IllegalStateException:无法解析组合”
- java - Spring WebFlux switchIfEmpty 返回不同的类型
- angular - 以角度形式如何获取 Client 对象数组并将 id 值用作表单组成员中的值
- wordpress - 如何在 wordpress 中以编程方式注册 genesis 自定义块?
- c# - 有没有一种方便的方法可以在 C# 中将字符串的一部分从一个索引获取到另一个索引?
- powershell - Graph API - 从预建脚本中添加带有员工 ID 的自定义列
- c++ - 通过类构造函数了解何时在 () 和 {} 初始化中发生检查
- azure - azure ml 管道创建中面临的问题
- c - 如何在c中拆分字符串