vue页面的title放到一个js文件里面配置的使用vue-i18n时如何实现中英文切换

要实现中英文切换，可以使用vue-i18n库来管理多语言。首先，在项目中安装vue-i18n库：

npm install vue-i18n

然后在项目中创建一个i18n.js文件来配置多语言支持：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    title: 'Title'
  },
  zh: {
    title: '标题'
  }
}

const i18n = new VueI18n({
  locale: 'en', // 默认语言为英文
  messages
})

export default i18n

在上面的配置中，我们定义了两种语言：英文和中文，并分别设置了对应的标题。默认语言为英文。

接下来，在主组件中引入并使用i18n.js配置的多语言：

<template>
  <div>
    <h1>{{ $t('title') }}</h1>
    <button @click="changeLanguage">Change Language</button>
  </div>
</template>

<script>
import i18n from './i18n'

export default {
  name: 'App',
  i18n,
  methods: {
    changeLanguage() {
      if (this.$i18n.locale === 'en') {
        this.$i18n.locale = 'zh'
      } else {
        this.$i18n.locale = 'en'
      }
    }
  }
}
</script>

在上面的代码中，我们使用$t方法来获取对应语言的标题，并通过$i18n.locale来切换语言。

最后，在入口文件main.js中引入i18n.js：

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

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

这样就可以实现在vue页面中使用vue-i18n切换中英文了。当点击"Change Language"按钮时，语言将切换为另一种