vue简单实现国际化来看看？_vue nacos使用_vue前端连nacos

最近豆芽的接到业务需求，需要将现在的一个项目改成国际化，三种语言切换，英语，简体中文，繁体中文。话不多说，豆芽以前使用过国际化，知道vue-i18n可以实现国际化，话不多说，直接操作，实现一个简单的国际化操作。

我们先安装vue-i18n插件

npm install vue-i18n --save

1
2

在合适的地方新建我们三种语言的配置js

在main.js引入我们的vue-i18n插件和引入我们的语言包
这个时候注意不要忘记挂载到vue上

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) ;

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
    messages: {
      'zh-CN': require('./util/lang/zh\_cn'),   // 中文简体语言包
      'zh-TW': require('./util/lang/zh\_tw'),   // 中文繁体语言包
      'en-US': require('./util/lang/en\_us')    // 英文语言包
    }
})
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

那么我们现在在配置文件里面填写我们需要转换的内容。

//zh\_cn.js
export const lang = {
    language:'语言'
}
//zh\_tw
export const lang = {
    language:'語言'
}
//en\_us
export const lang = {
    language:'Language'
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14

那么在想转换的页面进行操作编写

<template>
  <div id="app">
    <span>{{$t('lang.language')}}</span>
    <button @click="clickCN">中文简体</button>
    <button @click="clickTW">中文繁体</button>
    <button @click="clickUS">英文</button>


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>**HTML/CSS**

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/820f53e500521b62fd2f7344cda32a74.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/d3c9a952061b7307c4ecaf4219e36a38.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

vaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/b2bbc3079dd4ca502237e3b3b809b627.webp?x-oss-process=image/format,png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37