我有一个用于国际化的 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 中的字符串并更新我的应用程序),但是一旦我构建了应用程序并将其放在生产站点上,它将不再热重载。
我怎样才能实现这一目标?