前言
由于本人的能力有限，如若有说得做的不对的地方，还望指出。当然，如若你有更好的方法，或者更优解，还望不吝赐教。
创作不易，转载请注名出处。
原文博客（本人博客）地址：http://www.blog.geyunjie.com/2020/07/07/nuxt-i18n/
根据需求，现在需要做一个服务端渲染的PC网站。SSR
技术选型：Vue Vue-i18n Nuxt.js elementUI
首先说一下，nuxt.js和我们之前做的SPA单页面应用不一样，做国际化也不一样，之前已经写过在SPA中如何使用国际化，现在再写一下在SSR中如何使用国际化
1npm install vue-i18n --save
2yarn add vue-i18n --save
在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}
在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 /<defaultLocale>/... -> 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}
在上面写好之后，需要在这里进行配置才可以使用
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}
根据自己不同的需求，创建不同的语言包，这里只展示一个语言包
新建 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}
在page页面文件夹下创建_lang文件夹。lang前面的下划线是动态路由的意思，nuxt.js的router路由文件会根据page文件夹自动生成对应的路由文件
下面代码是切换语言的文件代码
创建page/_lang/index.vue
<template>
<el-container class="bv-example-row main">
<NuxtLink
v-if="$i18n.locale === 'zh-CN'"
:to="{ name: 'lang', params: { lang: 'en-US' } }"
class="Header__Link"
active-class="none"
exact
>
en{{ $t('links.english') }}
</NuxtLink>
<NuxtLink
v-else
:to="{ name: 'lang', params: { lang: 'zh-CN' } }"
class="Header__Link"
active-class="none"
exact
>
zh{{ $t('links.english') }}
</NuxtLink>
<p>{{ $route.fullPath }}</p>
</el-container>
</template>
<script>
export default {
head() {
return { title: this.$t('home.title') }
},
components: {},
created() {
console.log(this)
},
}
</script>
<style scoped>
.main {
margin: 30px auto;
}
</style>
创建page/index.vue
<script>
import Index from '@/pages/_lang/index'
export default Index
</script>
到此 国际化就配置完成了。
运行结果
默认语言URL：http://localhost:3000
非默认语言URL：http://localhost:3000/en-US
如果能够帮助到你，是小编最大的荣幸
当然 有 不好的地方 请大家帮忙指出 学习永无止境
小编一直认为 人外有人 天外有天 一起学习 共同进步
让我们共同加油吧！！！
