Vue项目：让客户编辑翻译文件无需重建，解决生产环境不生效问题

你遇到的核心问题是：生产环境中webpack会把通过import导入的translation.js打包进最终的bundle文件里，所以你static目录下的原文件其实已经没用了——客户修改它自然不会生效。要实现客户能直接编辑配置文件无需重建项目，得换一种加载方式：从静态文件异步加载，而不是通过webpack打包导入。

下面是具体的实现步骤：

1. 调整translation.js的格式 #

因为要通过浏览器直接加载，不能用ES模块的export default，改成挂载到全局对象上：

// static/translation.js
window.messages = {
  en: {
    message: {
      welcome: 'Welcome',
    },
  },
  fr: {
    message: {
      welcome: 'Bonjour',
    },
  },
};

2. 在index.html中引入这个静态文件 #

在public/index.html（vue-cli3+）或者项目根目录的index.html（旧版vue-cli-webpack模板）里添加脚本引入，确保在Vue初始化前加载：

<script src="<%= BASE_URL %>translation.js"></script>

3. 修改main.js中的i18n初始化逻辑 #

不再通过import导入，而是直接使用全局的window.messages，同时做个容错处理避免加载失败：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App';

Vue.use(VueI18n);

// 从全局对象获取国际化配置，兜底空对象防止加载异常
const messages = window.messages || {};

const i18n = new VueI18n({
  locale: 'en',
  messages,
});

new Vue({
  i18n,
  el: '#app',
  components: { App },
  template: '<App/>',
});

4. 可选：实现生产环境下的自动更新（无需手动刷新） #

如果希望客户修改translation.js后不用刷新页面就能看到变化，可以加个简单的定时轮询监听逻辑：

// 在main.js末尾添加（仅生产环境启用）
if (process.env.NODE_ENV === 'production') {
  let lastModified = 0;
  // 每5秒检查一次文件更新，可按需调整间隔
  setInterval(() => {
    fetch('translation.js?' + Date.now()) // 加时间戳避免浏览器缓存
      .then(res => {
        const lastModTime = new Date(res.headers.get('Last-Modified')).getTime();
        if (lastModTime > lastModified) {
          lastModified = lastModTime;
          // 重新加载配置文件并更新i18n
          const script = document.createElement('script');
          script.src = `translation.js?${lastModTime}`;
          script.onload = () => {
            // 更新对应语言的配置
            i18n.setLocaleMessage('en', window.messages.en);
            i18n.setLocaleMessage('fr', window.messages.fr);
            // 触发全局事件通知组件更新（如果需要的话）
            window.dispatchEvent(new Event('i18nUpdated'));
          };
          document.body.appendChild(script);
        }
      })
      .catch(err => console.error('检查翻译文件更新失败:', err));
  }, 5000);
}

这样客户修改文件后，最多5秒就能看到界面更新，不用手动刷新页面。

为什么开发环境之前能生效？ #

开发环境下webpack的dev-server会对静态文件做特殊处理，同时你的import路径指向static目录时，dev-server会监听这个文件的变化并触发热重载；但生产环境打包后，webpack会把所有import的模块整合到最终的bundle里，静态目录下的原文件就被完全忽略了，这就是问题的根源。

内容的提问来源于stack exchange，提问作者Sisky