最近公司有一个官网项目需要增加多语言,项目使用的是vue + nuxt + iview 框架。
安装依赖 npm install --save vue-i18n
根据nuxt官网的国际化demo,完成项目的国际化部署。
官网Demo :
https://zh.nuxtjs.org/examples/i18n
其中要注意的几点
1、nuxt.config.js 中
plugins: [
src: '~plugins/i18n.js',
// ssr: false 这个东西一定不要加,加上的话即便值为false,也会报错,i18n 失效
src: '~plugins/vue-iview',
ssr: false
2、为了能够做到切换语言时页面不抖动,刷新后页面保持当前的语种,那么请一定按照官网Demo的示例来切换语种
<!-- 以下示例中文为默认语种 -->
<!-- 第一种方式,在HTML中直接切换语种 -->
<nuxt-link :to="$route.fullPath.replace(/^\/[^\/]+/, '')" >中文</nuxt-link>
<nuxt-link :to="`/fr` + $route.fullPath" >法语</nuxt-link>
<!-- 第二种方式,通过点击事件切换语种 -->
<nuxt-link @click="changeLanguage('zh')">中文</nuxt-link>
<nuxt-link @click="changeLanguage('fr')">法语</nuxt-link>
<script>
methods: {
changeLanguage(language) {
let locale = this.$store.state.locale
if (language === 'zh') {
this.$router.push(this.$route.fullPath.replace(/^\/[^\/]+/, ''))
} else if (language === 'en') {
// 防止重复点击
if(locale !== 'en'){
this.$router.push(`/en` + this.$route.fullPath)
</script>
3、在pages下创建_lang文件夹,名称必须是_lang,将pages下已有项目全部拷贝至_lang文件夹内,然后在原有页面中写如下代码引入_lang 文件夹内的页面
<script>
import Index from '~/pages/_lang/index'
export default Index
</script>
4、nuxt 国际化 的跳转以及传参
注意,path后的路径开头不要加 “ / ”
<!-- 跳转页面 -->
<nuxt-link :to="$i18n.path('home/index')" >跳转</nuxt-link>
<!-- 携带参数 -->
<nuxt-link :to="{path:$i18n.path('home/index'), query:{id:xxx}}" >跳转</nuxt-link>
<script>
// 跳转页面
this.$router.push(this.$i18n.path("home/index"))
// 携带参数
this.$router.push({ path: this.$i18n.path("home/index"), query:{id: 'xxxx'} })
</script>
其余的按照官网Demo照搬即可
如此配置后,项目的国际化已经部署完毕
nuxt中i18n的使用方法:
1、在template中使用i18n
<h1>{{ $t('home.title') }}</h1>
2、在.vue页面中的script内使用i18n
data() {
return {
title: this.$t('home.title')
3、在.js页面中使用i18n (.js页面中没有vue实例,所以this.$t失效)(不推荐)
1、在layouts文件夹下的default.vue的mounted中将i18n挂载到window上
或者 挂载到 plugins 下的 i18n.js 内
// default.vue
mounted() {
window.vm = this.$i18n
2、在.js页面内使用
// test.js
if (process.browser) { //判断是否在浏览器环境下
let vm = window.vm
let data = {
home:vm.t('home.title'),
不过经测试会偶发静态资源加载快于window挂载i18n的速度,导致window上还未成功挂载i18n,静态资源就开始使用的情况。
最后一种方案
所以我最终采用最保险的方式实现静态资源中英版的替换
1、将静态资源的中英两个版本同时引入到该页面
2、判断locale的值,如果是中文就使用中文版的静态资源赋值,如果是英文就采用英文版的静态资源赋值
实现如下:
import ChineseData form '~/static/assets/libs/staticData_zh.js' // 中文资源
import EnglishData form '~/static/assets/libs/staticData_en.js' // 英文资源
export default {
components: {},
data() {
return {
text: {}
created() {
//判断当前语言环境,进行静态资源的赋值
let locale = this.$store.state.locale
if (locale === 'zh') {
this.text = ChineseData.text
} else if (locale === 'en') {
this.text = EnglishData.text
初次接触NUXT,有很多不是特别透彻的地方,如果有更好的建议,欢迎评论~
如果能够帮到你,可以给我一个赞吗? 不胜感激~
最近公司有一个官网项目需要增加多语言,项目使用的是vue + nuxt+ iview 框架。安装依赖npm install --save vue-i18n根据nuxt官网的国际化demo,完成项目的国际化部署。官网Demo :https://zh.nuxtjs.org/examples/i18n其中要注意的几点1、nuxt.config.js 中plugins: [ { src: '~plugins/i18n.js', // ssr: fals...
2、新建文件夹plugins(放置插件),新建i18n.js
3、新建文件夹middleware(中间件),新建i18n.js
4、在store文件夹里,新建index.js
5、在nuxt.config.js中引入
6、在页面使用
7、切换语言我这里用得是bootstrapVue的组件,根据自己的页面情况而定
但是出现了诸多问题:一、
vuex没有数据持久化,因为nuxt
nuxt.js + vue-i18n开发国际化项目
接到公司项目要做一个国际化的官网、之前一直没有搞过,百度了一下也不是很难;记录一下;
步骤一:安装vue+i18n
npm install vue-i18n 或 yarn add vue-i18n
步骤二:在store文件夹下更新index.js文件
export const state = () => ({
locales: ['en', 'zh'],
locale: 'zh'
export const mu
NuxtJs创建项目的选项说明文档。
创建完项目能运行即可。这里选用NuxtJs官方集成的Vuei18n插件。(网上各种自己集成的的真鸡儿麻烦)
安装完之后修改nuxt.config.js配置文件。
内容国际化
seo国际化
修改nuxt.config.js配置文件。
根据浏览器语言不同,标题会发生相对于的变化,其他seo属性酌情配置即可。......
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generate
有关工作原理的详细说明,请查看 。