使用未捆绑的外部全局变量文件

Question

我有一个用于国际化的JS文件。 我希望能够将此JS文件传递给客户端，以便他们进行编辑，而无需我重新构建整个项目。

目前，我将此文件保存在静态文件夹中，以便将其转移到构建后的dist文件夹中（我使用的是vue-cli-webpack模板）。

translation.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中的字符串并更新我的应用程序），但是一旦我构建了该应用程序并将其放在生产站点上，它将不再热装。

我该如何实现呢？

Answer 1

这是我达到预期结果的方式：

在我的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文件所做的任何更改都会在生产环境中显示。

使用未捆绑的外部全局变量文件

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-05-23 01:31:05

使用未捆绑的外部全局变量文件

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-05-23 01:31:05

解决方案1
0 已采纳 2018-05-23 01:31:05