致力于提供有竞争力的软件解决方案和服务,德尚网络欢迎您!
DSKMS演示
DSKMS(内容付费系统)演示地址及账号
DSKMS交流群:DSCMS开源官方群2
演示角色 演示地址 账号 密码
后台PC端 http://dskms.csdeshang.com/admin/ admin admin888
用户PC端 http://dskms.csdeshang.com/ buyer 123456
机构PC端 http://dskms.csdeshang.com/home/sellerlogin/login.html seller 123456
用户手机端 http://m.dskms.csdeshang.com/home/memberlogin buyer 123456
机构手机端 http://m.dskms.csdeshang.com/home/sellerlogin seller 123456
DSKMS(内容付费系统)移动端二维码演示地址
  • 用户手机端

  • 机构手机端

  • 微信小程序

DSShop演示
DSShop(单店铺系统)相关演示地址及账号
DSShop交流群:DSShop单店铺商城官方群
演示角色 演示地址 账号 密码
后台PC端 http://dsshop.csdeshang.com/admin/ admin admin888
用户PC端 http://dsshop.csdeshang.com/ buyer 123456
手机端 http://m.dsshop.csdeshang.com/ buyer 123456
DSShop(单店铺系统)移动端二维码演示地址
  • 用户手机端

  • 微信小程序

DSO2O演示
DSO2O(外卖/上门服务/跑腿系统)演示地址及账号
DSO2O交流群:DSShop单店铺商城官方群
演示角色 演示地址 账号 密码
后台PC端 https://dso2o.csdeshang.com/admin/ admin admin888
用户PC端 https://dso2o.csdeshang.com/ buyer 123456
卖家PC端 https://dso2o.csdeshang.com/home/sellerlogin/login.html seller 123456
服务机构管理 https://dso2o.csdeshang.com/home/fuwu_manage_login/login.html 后台添加
用户手机端 https://m.dso2o.csdeshang.com/home/memberlogin buyer 123456
商家手机端 https://m.dso2o.csdeshang.com/home/sellerlogin seller 123456
配送员 https://m.dso2o.csdeshang.com/distributor/login 测试配送员 123456
服务机构管理 https://m.dso2o.csdeshang.com/fuwu_manage/login test1 123456
DSO2O(外卖/上门服务/跑腿系统)移动端二维码演示地址
  • 用户手机端

  • 商家手机端

  • 配送员管理

  • 上门服务机构

  • 微信小程序

DSMall演示
DSMall(多店铺商城系统)演示地址及账号
DSMall交流群: DSMall开源商城官方群
演示角色 演示地址 账号 密码
后台PC端 https://dsmall.csdeshang.com/admin/ admin admin888
用户PC端 https://dsmall.csdeshang.com/ buyer 123456
商家PC端 https://dsmall.csdeshang.com/home/sellerlogin/login.html seller 123456
用户手机端 https://m.dsmall.csdeshang.com/ buyer 123456
商家手机端 https://m.dsmall.csdeshang.com/home/sellerlogin seller 123456
微信小程序 微信内搜索小程序 DSSHOP
DSMall(多店铺商城系统)移动端二维码演示地址
  • 用户手机端

  • 商家手机端

  • 混合版苹果APP

  • 混合版安卓APP
    (使用浏览器打开)

  • 微信小程序

vue-i18n 多语言切换功能

1.安装vue-i18n    

npm install vue-i18n

可参考vue-i18n官网文档:http://kazupon.github.io/vue-i18n/


2.main.js中引入:

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh-CN', // 通过切换locale的值来实现语言切换,this.$i18n.locale
  messages: {
    'zh-CN': require('./lang/zh'), // 中文语言包
    'en-US': require('./lang/en') // 英文语言包
  }
})
new Vue({
  el: '#app',
  i18n, //新增
  router,
  store,
  components: { App },
  template: ''
})


3.新增语言包

lang/zh.js

export const lang = {
  menu: [
    {name: '首页', path: ''},
    {name: '商品分类', path: ''},
    {name: '促销中心', path: ''},
    {name: '用户中心', path: ''},
    {name: '文章公告', path: ''}
  ],
  login: '登录',
  register: '注册',
  logout: '退出'
}


lang/en.js

export const lang = {
  menu: [
    {name: 'HomePage', path: ''},
    {name: 'HomeCategory', path: ''},
    {name: 'HomePro', path: ''},
    {name: 'HomeUser', path: ''},
    {name: 'HomeArticle', path: ''}
  ],
  login: 'login',
  register: 'register',
  logout: 'logout'
}


4.语言切换

this.$i18n.locale = 'en-US'// 切换成英文
this.$i18n.locale = 'zh-CN'// 切换成中文

实用中可以参考以下方法进行改进

@click="changeLang"

changeLang() {
       this.lang = localStorage.getItem('locale') || 'zh-CN';
       
       if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;
       } else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;
       }
       localStorage.setItem('locale', this.lang);
    },


4.具体呈现


{{ $t('lang.welcome') }}

:title="$t('lang.new_arrivals')"

v-for="(item,index) in $t('lang.menu')"


例:




有不清楚请咨询客服

上一篇:DSMall Vue3.0安装

下一篇:暂时没有了