Laravel中vue-i18n使用记录

事例演示的是laravel中vue的架构，采用vue-i18n支持多语言，地址栏地址展示为下述样式（以zh和en区分中英文）：

http://xxx.com/zh
http://xxx.com/zh/about
http://xxx.com/en
http://xxx.com/en/zhout

一、Laravel 和 Vue的路由配置

后端部分：因为路由交给前端去做了，所以laravel的路由要改为下，（ps：laravel要配置多语言，自行百度或谷歌如何操作）

// routes/web.php 文件
 LaravelLocalization::setLocale(), 'middleware' => [ 'localeSessionRedirect', 'localizationRedirect', 'localeViewPath' ]], function()
{

    Route::any('/', function () {
        return view('index');
    });

    Route::any('{all}', function () {
        return view('index');
    })->where(['all' => '.*']);
});

前端部分：因为每次跳转都不想加上zh和en前缀，所以直接配置到路由中了

import VueRouter from 'vue-router'

import Home from '../pages/home/Home'
import About from '../pages/about/About'

let routes = [
    {
        path: '/:lang',
        name: 'home',
        component: Home,
        meta: {
            title: 'home.page_title'
        }
    },
    {
        path: '/:lang/about',
        name: 'about',
        component: About,
        meta: {
            title: 'about page title'
        }
    },
    {
        path: '/:lang/*',
        name: 'not-found',
        component: Home,
        meta: {
            title: 'passwords.password'
        }
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
})

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = router.app.$t(to.meta.title)
    }
    let lang = router.app.$i18n.locale
    let urlLang = to.params.lang
    
    if(urlLang != 'zh' && urlLang != 'en') {
        let nextUrl = `/${lang + to.path}`
        next(nextUrl)
    } else {
        next()
    }
    
})

export default router

这样写后，在vue中跳转就可以这样操作了

About Us

二、 安装vue-i18n

接来下开搞多语言，这里采用vue-i18n，但是不想单独为vue写多语言文件，这里直接采用laravel的多语言文件，laravel有模块 laravel-vue-i18n-generator
处理让laravel的多语言文件生成为vue的多语言文件。此处不多描述，直接打开上述连接按照步骤来就好。
laravel多语言文件生成vue多语言文件命令（麻烦的就是每次改变文件都要执行下这个命令）

$ php artisan vue-i18n:generate

回到前端部分

安装vue-i18n， npm或yarn，项目用的是哪个就用哪个安装

$ npm i -S vue-i18n
$ yarn add vue-i18n

三、使用vue-i18n

主入口文件中导入

import Vue from 'vue'
// 导入vue-i18n
import VueInternationalization from 'vue-i18n'

Vue.use(VueInternationalization)
// router一定要写在i18n后面
Vue.use(VueRouter) 
// 导入laravel多语言文件生成的vue-i18n语言文件
import Locale from './lang/vue-i18n-locales.generated'
// 获取html标签上lang的内容（zh、en)
const lang = document.documentElement.lang.substr(0, 2)
// 设置语言环境和语言文件
const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
})

new Vue({
    router,
    i18n, // 这里不能忘
    render: h => h(App)
}).$mount('#app')

vue template文件中使用

{{ $t('common.footer_live_chat') }}

vue script中使用

* 多语言变量在script中获取时必须写到computed计算属性中才会生效，如过写在data中也有效果，但是切换语言时，所有变量不会跟着切换。

export default {
    computed: {
        title: this.$t('common.title'),
        info: this.$t('common.info')
    },
}

四、切换语言

this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en'
let curPath = this.$route.path.substring(3)
// 这样拼凑是因为我router配置的问题
this.$router.push(`/${this.$i18n.locale + curPath}`)

最后

一堆坑，七凑八磨的撸出来的，若有更简便的方式，跪求告知！