Vue大型项目国际化与主题方案

大型Vue项目需支持多语言与主题切换，下面梳理核心实现方案。

国际化配置

vue-i18n基础配置

JavaScript

// i18n/index.js
import { createI18n } from 'vue-i18n'
import zhCN from './locales/zh-CN'
import enUS from './locales/en-US'

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('locale') || 'zh-CN',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

export default i18n

语言包组织

模块化语言文件

JavaScript

// i18n/locales/zh-CN.js
export default {
  common: {
    confirm: '确定',
    cancel: '取消',
    save: '保存',
    delete: '删除'
  },
  user: {
    title: '用户管理',
    name: '姓名',
    email: '邮箱',
    role: '角色'
  },
  order: {
    title: '订单列表',
    no: '订单号',
    amount: '金额',
    status: '状态'
  }
}

语言包按业务模块拆分，便于维护与按需加载。

主题方案设计

CSS变量定义

CSS

/* styles/variables.css */
:root {
  /* 亮色主题 */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #e0e0e0;
  --primary-color: #1890ff;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --border-color: #404040;
  --primary-color: #40a9ff;
}

主题切换Hook

JavaScript

// composables/useTheme.js
import { ref, watch } from 'vue'

const currentTheme = ref(localStorage.getItem('theme') || 'light')

export function useTheme() {
  const setTheme = (theme) => {
    currentTheme.value = theme
    document.documentElement.setAttribute('data-theme', theme)
    localStorage.setItem('theme', theme)
  }
  
  const toggleTheme = () => {
    setTheme(currentTheme.value === 'light' ? 'dark' : 'light')
  }
  
  return { currentTheme, setTheme, toggleTheme }
}

使用方式

组件中使用国际化

vue

<script setup>
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

const switchLanguage = (lang) => {
  locale.value = lang
  localStorage.setItem('locale', lang)
}
</script>

<template>
  <div>
    <h1>{{ t('user.title') }}</h1>
    <el-button>{{ t('common.confirm') }}</el-button>
    <el-select v-model="locale">
      <el-option label="中文" value="zh-CN" />
      <el-option label="English" value="en-US" />
    </el-select>
  </div>
</template>

动态加载语言包

按需加载策略

JavaScript

// i18n/dynamic.js
export const loadLocale = async (locale) => {
  const messages = await import(`./locales/${locale}.js`)
  i18n.global.setLocaleMessage(locale, messages.default)
  i18n.global.locale.value = locale
}

方案对比

方案	优点	缺点
CSS变量	切换快速，无需重载	兼容性要求高
CSS-in-JS	动态灵活	性能开销大
多套样式文件	隔离彻底	切换需加载资源

要点总结

国际化使用vue-i18n，语言包按业务模块拆分
主题切换基于CSS变量，通过data-theme属性控制
语言与主题配置持久化到localStorage
大型项目支持动态加载语言包，减少首屏体积
组件中使用t()函数包裹文本，便于扫描遗漏

存放路径: articles/VUE/专家/大型项目架构分层设计/国际化与主题方案.md

📝 发现内容有误？点击此处直接编辑