nuxt-i18n 国际化

前言

​ 由于本人的能力有限，如若有说得做的不对的地方，还望指出。当然，如若你有更好的方法，或者更优解，还望不吝赐教。

创作不易，转载请注名出处。

原文博客（本人博客）地址：http://www.blog.geyunjie.com/2020/07/07/nuxt-i18n/

1、需求

根据需求，现在需要做一个服务端渲染的PC网站。SSR

技术选型：Vue Vue-i18n Nuxt.js elementUI

2、对于Vue-i8n在Nuxt.js中的使用

首先说一下，nuxt.js和我们之前做的SPA单页面应用不一样，做国际化也不一样，之前已经写过在SPA中如何使用国际化，现在再写一下在SSR中如何使用国际化

3、安装vue-i18n

1npm install vue-i18n --save

2yarn add vue-i18n --save

4、在nuxt中引入vue-i18n

在plugins文件夹下创建一个i18n.js文件，并写入如下代码

1importVuefrom'vue'

2importVueI18nfrom'vue-i18n'

3

4Vue.use(VueI18n)

5

6exportdefault({ app, store }) => {

7app.i18n =newVueI18n({

8    locale: store.state.locale,

9fallbackLocale:'zh-CN',// 我这里默认语言为中文

10    messages: {

11'en-US':require('@/locales/en-US.json'),

12'zh-CN':require('@/locales/zh-CN.json'),

13    },

14  })

15

16app.i18n.path =(link) =>{

17// 如果是默认语言，就省略

18if(app.i18n.locale === app.i18n.fallbackLocale) {

19return`/${link}`

20    }

21return`/${app.i18n.locale}/${link}`

22  }

23}

5、在vuex中保存语言的状态

在store页面下创建一个index.js文件

注意：

​ nuxt.js中如果想要使用vuex的模块化功能，需要使用如下方法，nuxt会自动生成模块化的vuex。

​ 如果不实用模块化，则和vuex的使用没有任何区别

1exportconststate =()=>({

2locales: ['zh-CN','en-US'],

3locale:'',

4})

5

6exportconstmutations = {

7// 此处为设置locale

8  SET_LANG(state, locale) {

9if(state.locales.includes(locale)) {

10      state.locale = locale

11    }

12  },

13}

6、在middleware文件夹下新建i18n.js文件用来控制语言的切换

middleware中间件

1exportdefaultfunction({

2  isHMR,

3  app,

4  store,

5  route,

6  params,

7  error,

8  redirect,

9}){

10constdefaultLocale = app.i18n.fallbackLocale

11// If middleware is called from hot module replacement, ignore it

12if(isHMR)return

13// Get locale from params

14constlocale = params.lang || defaultLocale

15if(!store.state.locales.includes(locale)) {

16returnerror({message:'This page could not be found.',statusCode:404})

17  }

18// Set locale

19store.commit('SET_LANG', locale)

20  app.i18n.locale = store.state.locale

21// If route is //... -> redirect to /...

22if(

23    locale === defaultLocale &&

24route.fullPath.indexOf('/'+ defaultLocale) ===0

25  ) {

26consttoReplace =

27'^/'+

28      defaultLocale +

29(route.fullPath.indexOf('/'+ defaultLocale +'/') ===0?'/':'')

30constre =newRegExp(toReplace)

31returnredirect(route.fullPath.replace(re,'/'))

32  }

33}

7、在nuxt.config.js文件中进行配置

在上面写好之后，需要在这里进行配置才可以使用

1exportdefault{

2/*

3  ** Nuxt rendering mode

4  ** See https://nuxtjs.org/api/configuration-mode

5  */

6mode:'universal',

7/*

8  ** Nuxt target

9  ** See https://nuxtjs.org/api/configuration-target

10  */

11target:'server',

12/*

13  ** Headers of the page

14  ** See https://nuxtjs.org/api/configuration-head

15  */

16  head: {

17title: process.env.npm_package_name ||'',

18    meta: [

19{charset:'utf-8'},

20{name:'viewport',content:'width=device-width, initial-scale=1'},

21      {

22hid:'description',

23name:'description',

24content: process.env.npm_package_description ||'',

25      },

26    ],

27    link: [

28{rel:'icon',type:'image/x-icon',href:'/favicon.ico'},

29      {

30rel:'stylesheet',

31href:'//at.alicdn.com/t/xxx.css',

32      },

33    ],

34// 头部内容、

35  },

36/*

37  ** Global CSS

38  */

39css: ['element-ui/lib/theme-chalk/index.css','@/assets/public.less'],

40/*

41  ** Plugins to load before mounting the App

42  ** https://nuxtjs.org/guide/plugins

43  */

44  plugins: [

45{src:'@/plugins/element-ui',ssr:true},

46'~/plugins/axios',

47+'@/plugins/i18n.js',

48  ],

49

50  router: {

51+    middleware:'i18n',

52  },

53  generate: {

54// 这里是指定生成静态文件的路由

55+    routes: ['/','/about','/zh-CN','/zh-CN/about'],

56  },

57/*

58  ** Auto import components

59  ** See https://nuxtjs.org/api/configuration-components

60  */

61components:true,

62/*

63  ** Nuxt.js dev-modules

64  */

65  buildModules: [

66// Doc: https://github.com/nuxt-community/eslint-module

67'@nuxtjs/eslint-module',

68  ],

69/*

70  ** Nuxt.js modules

71  */

72modules: ['@nuxtjs/axios'],

73/**

74  * axios 代理

75  */

76  axios: {

77prefix:'/api',

78credentials:true,

79proxy:true,

80  },

81  proxy: {

82'/api': {

83target:'xxxx',

84      pathRewrite: {

85'^/api/':'/',

86      },

87changeOrigin:true,

88    },

89  },

90/*

91  ** Build configuration

92  ** See https://nuxtjs.org/api/configuration-build/

93  */

94// build: {

95//  transpile: [/^element-ui/],

96

97// },

98  build: {

99vendor: ['element-ui'],

100    babel: {

101      plugins: [

102        [

103'component',

104          {

105libraryName:'element-ui',

106styleLibraryName:'theme-chalk',

107          },

108        ],

109      ],

110comments:true,

111    },

112  },

113}

8、创建本地语言包

​ 根据自己不同的需求，创建不同的语言包，这里只展示一个语言包

​ 新建 local文件夹，创建en-US.json文件

1{

2"links": {

3"home":"Home",

4"about":"About",

5"english":"English"

6  },

7"home": {

8"index":"index",

9"search":"searchs",

10"title":"hahah"

11  },

12"about": {

13"title":"About"

14  }

15}

9、在page文件夹下创建页面文件

在page页面文件夹下创建_lang文件夹。lang前面的下划线是动态路由的意思，nuxt.js的router路由文件会根据page文件夹自动生成对应的路由文件

下面代码是切换语言的文件代码

创建page/_lang/index.vue

创建page/index.vue

10、总结

到此 国际化就配置完成了。

运行结果

默认语言URL：http://localhost:3000

非默认语言URL：http://localhost:3000/en-US

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！