Использование файла внешней глобальной переменной, который не связан - PullRequest
Новая
       20

Использование файла внешней глобальной переменной, который не связан

0 голосов
/ 23 мая 2018

У меня есть файл JS, который я использую для интернационализации.Я хочу иметь возможность передать этот JS-файл клиенту, чтобы он смог отредактировать его без необходимости перестраивать весь проект.

В настоящее время я храню этот файл в статической папке, чтобы он был перенесен на мойПост-дистрибутивная папка (я использую шаблон 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, и она обновит мое приложение), но как только я создаю приложение и помещаю его на рабочий сайт, оно не будетдольше горячая перезагрузка.

Как я могу добиться этого?

1 Ответ

0 голосов
/ 23 мая 2018

Вот как я добился желаемого результата:

Внутри моего 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 отображается в производственной среде.

...