前端 项目 中英文切换无感刷新

非vue项目 实现：

1. 将所有需要翻译的文本都存储在一个JSON文件中，这个文件包含中英两种语言的文本，例如：

   {
     "title": {
       "en": "Welcome to my website",
       "zh": "欢迎来到我的网站"
     },
     "description": {
       "en": "This is a website about...",
       "zh": "这是一个关于...的网站"
     },
     // ...
   }

2. 在页面加载时，根据用户的语言设置加载对应的文本，可以使用浏览器提供的语言设置来判断用户的语言，如下所示：

   const userLang = navigator.language || navigator.userLanguage
   const lang = userLang.startsWith('zh') ? 'zh' : 'en'
   const translations = fetch('translations.json').then(res => res.json())
   
   Promise.all([translations]).then(([translations]) => {
     const title = document.getElementById('title')
     const description = document.getElementById('description')
     title.textContent = translations.title[lang]
     description.textContent = translations.description[lang]
   })

3. 当用户切换语言时，只需要重新加载JSON文件，然后重新渲染页面即可，如下所示：

   const langSwitcher = document.getElementById('lang-switcher')
   langSwitcher.addEventListener('click', async () => {
     const lang = langSwitcher.value
     const translations = fetch('translations.json').then(res => res.json())
   
     Promise.all([translations]).then(([translations]) => {
       const title = document.getElementById('title')
       const description = document.getElementById('description')
       title.textContent = translations.title[lang]
       description.textContent = translations.description[lang]
     })
   })

   如果你使用的是ElementUI的国际化方案，可以通过以下步骤实现中英文切换时无感刷新：

• 1.在项目中使用ElementUI的i18n插件来进行国际化。在main.js中引入i18n插件，并在Vue实例中使用：

• import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  import messages from './lang'
  
  Vue.use(VueI18n)
  Vue.use(ElementUI)
  
  const i18n = new VueI18n({
    locale: 'zh', // 默认语言
    messages
  })
  
  new Vue({
    i18n,
    render: h => h(App)
  }).$mount('#app')
  

1. 将所有需要翻译的文本都存储在一个JSON文件中，这个文件包含中英两种语言的文本，例如：

• {
    "welcome": {
      "en": "Welcome to my website",
      "zh": "欢迎来到我的网站"
    },
    "description": {
      "en": "This is a website about...",
      "zh": "这是一个关于...的网站"
    },
    // ...
  }
  
  
  

1. 在切换语言时，只需要重新设置i18n实例的locale属性，并重新加载JSON文件即可，如下所示：

• const langSwitcher = document.getElementById('lang-switcher')
  langSwitcher.addEventListener('click', async () => {
    const lang = langSwitcher.value
    const messages = fetch(`./lang/${lang}.json`).then(res => res.json())
    
    messages.then(messages => {
      i18n.locale = lang
      i18n.setLocaleMessage(lang, messages)
    })
  })
  

  这样，当用户切换语言时，页面会重新渲染，但是用户不会感觉到页面的刷新。

或者是这种 vue项目中常用的

• 在项目中使用Vue-i18n插件来进行国际化。在main.js中引入i18n插件，并在Vue实例中使用：

  //  i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

import messagesZh from './lang/zh'
import messagesEn from './lang/en'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    zh: messagesZh,
    en: messagesEn
  }
})

/*********************/
 //  main.js
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

• 将所有需要翻译的文本都存储在两个对象中，分别对应中英文，例如：

// zh.js
export default {
  welcome: '欢迎来到我的网站',
  description: '这是一个关于...的网站'
}

// en.js
export default {
  welcome: 'Welcome to my website',
  description: 'This is a website about...'
}


//注意这里的语法  有些项目可能是这样做的
// en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  message: {
    onv: ' NMS Switch platform',
    xm: 'Name',
    runtime: 'Runtime',
    Dnterprisegateway: 'Dnterprise gateway',
    Addingroles: '
}
...enLocale
}

export default en

• 在切换语言时，只需要重新设置i18n实例的locale属性，并重新加载对应的对象即可，如下所示：

const langSwitcher = document.getElementById('lang-switcher')
langSwitcher.addEventListener('click', async () => {
  const lang = langSwitcher.value
  const messages = lang === 'zh' ? messagesZh : messagesEn
  
  i18n.locale = lang
  i18n.setLocaleMessage(lang, messages)
})

// 像上面的注意一样  如果我们的messageZh 和这个不一样  我们需要这里地方需要写成这样
// main.js
import messageCn from './i18n/langs/cn'
import messageEn from './i18n/langs/en'

   const  message = lang === 'cn' ? messageCn : messageEn
   i18n.setLocaleMessage(lang,message)   //无感刷新

这样，当用户切换语言时，页面会重新渲染，但是用户不会感觉到页面的刷新。