vue/nuxt +vue-i18n配置多语言,实现一条命令打相应语言包和切换页面语言

vue配置多语言

1.安装依赖：

npm i vue-i18n -S

2.i18n.js

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

//多语言
Vue.use(VueI18n)


const i18n = new VueI18n({
  locale: store.getters.locale, // 将要切换的语言，可以通过url拼的参数获取，用户行为select选择获取，本地manifest配置获取等，根据场景动态获取
  messages: {
    'zh': require('@/assets/lang/zh.json'),
    'en': require('@/assets/lang/en.json')
  }
})
export default i18n

3.main.js 引用i18n.js

import i18n from '@/plugins/i18n'
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})

4.在store目录，进行全局配置

const state = {
  locales: ['en', 'zh', 'es'],
  locale: "en",
}
const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
      state.locale = locale
    }
  }
}

nuxt配置多语言（应该随着打包命令的不同，打包对应的语言也不同）

在package.json 设置命令

重点是BASE这个变量
"build:test:en": "cross-env NODE_ENV=testing BASE=test:en nuxt build",
"build:test:it": "cross-env NODE_ENV=testing BASE=test:it nuxt build"

在nuxt.config.js 进行命令指向配置，

（一般的经验贴都是说要在中间件配置js然后控制路由并放全局，
但我试了很多次。并不能成功获取命令，甚至是undefined。
而且放置路由，有点多余。以下是自己想出来的）

require('dotenv').config() //获取命令及环境

let maps = {
  'test:zh': 'zh',
  'test:en': 'en',
  }
 
  let lang = maps[process.env.BASE] //遍历判断环境

//这个是重点
head: {
    title: '默认显示页面名称',
    htmlAttrs: {
      lang: lang //主要靠这个属性进行传递打包命令携带的语言
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],

在plugins目录的i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)


export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch


  app.i18n = new VueI18n({
    locale: app.head.htmlAttrs.lang || store.state.modules.lang.locale,//获取到打包命令语言和本地语言
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'),
      'zh': require('~/locales/zh.json'),
    }
  });
  store.commit('modules/lang/SET_LANG', app.i18n.locale );
  app.i18n.path = (link) => {
    alert(link)
    console.log(app.i18n.locale)
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`;
    }
    return `/${app.i18n.locale}/${link}`;
  }
}