JavaScript多语言词条导出推荐静态对象+ES模块：按语言分文件默认导出（如zh.js、en.js），或单文件命名导出（zh/en常量+availableLocales数组），可选配t()翻译函数支持参数替换，注意避免动态值、保持键名一致、配置路径别名。
在 JavaScript 中，用 export 导出多语言切换的翻译词条，核心是把不同语言的键值对组织成模块化对象，再通过命名导出或默认导出提供给其他文件使用。不需要运行时动态加载语言包时，推荐用静态对象 + ES 模块方式管理。
按语言拆分成独立模块导出
为每种语言建一个文件（如 zh.js、en.js），各自用 export default 导出纯对象：
// locales/zh.js
export default {
home_title: '首页',
login_btn: '登录',
welcome: '欢迎回来，{{name}}！'
};
// locales/en.js
export default {
home_title: 'Home',
login_btn: 'Login',
welcome: 'Welcome back, {{name}}!'
};
这样其他文件可按需导入：
import zh from './locales/zh.js';
import en from './locales/en.js';
const messages = { zh, en };
用命名导出统一管理所有语言
如果偏好单文件集中维护，可用命名导出（named export）避免默认导出冲突：
立即学习“Java免费学习笔记（深入）”；
// locales/index.js
export const zh = {
home_title: '首页',
login_btn: '登录'
};
export const en = {
home_title: 'Home',
login_btn: 'Login'
};
// 也可额外导出语言列表，方便遍历
export const availableLocales = ['zh', 'en'];
使用时解构导入更清晰：
import { zh, en, availableLocales } from './locales/index.js';
支持带参数的翻译函数（可选增强）
单纯导出对象不够灵活？可以配合一个轻量翻译函数一起导出：
// locales/utils.js
export function t(messages, key, replacements = {}) {
let text = messages[key] || key;
Object.entries(replacements).forEach(([k, v]) => {
text = text.replace(`{{${k}}}`, v);
});
return text;
}
结合前面的语言包使用：
import { zh } from './locales/index.js';
import { t } from './locales/utils.js';
console.log(t(zh, 'welcome', { name: '小明' })); // "欢迎回来，小明！"
注意点：避免常见陷阱
-
不要在导出对象里写执行逻辑：比如
new Date().getFullYear()这类动态值会只在模块加载时求值一次，后续不更新 - 键名保持一致且语义化：所有语言文件用完全相同的 key，便于校验和 IDE 提示
-
路径别名配置可提升可读性：在构建工具（Vite、Webpack）中配
@/locales别名，避免 ../../../ 深层路径 -
JSON 不支持 export：想用 .json 存词条？得靠构建工具插件（如 Vite 的
vite-plugin-json）或改用fetch动态加载，无法直接importJSON 并export
