vue.js前端开发基础与项目实战,前端开发语言vue
前端国际化是一个常见的需求，但是互联网上直接可用的解决方案并不多。本文主要介绍Vue.js项目前端多语言解决方案的思路和做法，有需要的可以参考。
:
目录
1.需要处理哪些内容？2.基本思路？3.具体实践中的一些细节？1.getLang模块的实现获取目前应该使用哪种语言？2.Vux组件的多语言包配置？3.vux-loader的配置？复制内部和外部自定义组件的多语言性？5.vuex-i18n的实现？6.图片多语言化？7.通过按钮在当前页面上切换当前语言后。8.Yaml中特殊字符的转义和汇总。前端国际化是普遍要求。然而，这方面的在线程序并不多。最近做了一个基于Vue.js的多语言实现，下面简单总结一下。
一、通常有哪些内容需要处理
一般来说，在Web应用中，需要进行语言间切换的内容通常包括以下几个方面：
1.模板中的内容，比如Vue.js的模板标签中的文本内容
2.JS代码中的文本内容
3.图片中的文案内容
4.页面标题
5.第三方组件中的文案(例如，我在我的项目中使用了Vux组件)
6.要在后端界面中显示到前端的数据内容。
7.后端接口返回错误提示
二、基本思路
1、首先，需要确定以什么样的方式来获取到当前应该展示何种语言
我用的是URL投递？Lang=en还是？Lang=zh-CN作为传递参数。这样做的好处是您可以通过链接指定使用哪种语言。但是，仅仅依靠地址栏参数是不方便的。比如页面跳转时，这个地址栏参数可能会丢失。这将导致您不知道在页面跳转后显示哪种语言。最理想的方式应该是用这个参数进入一个页面(这个时候你就知道用哪种语言了)，跳转到其他页面的时候不需要带这个lang参数，因为你已经知道用哪种语言了。因此，您应该在进入第一页后立即保存该参数，例如，在localstorage和vuex状态下。
这里介绍一个语言判断的优先级问题。
因为地址栏里可能有lang参数，localstorage里也可能有相关的存储字段(因为我上次访问过这个应用)，你可能也想设置默认的降级语言，等等。应该如何处理它的优先级？
的正确优先级应该是：
先看看地址栏有没有参数；
看看localstorage里有没有；
然后通过navigator.language获取浏览器默认语言，看看是不是你的应用支持的语言，如果是，就采用；
最后，使用备用语言(例如，通用英语)。
当然，你可以根据需要做一些简化。
2、其次，采用什么工具来解决语言转换和打包的问题？
(1)选择1)i18n相关工具3354谁来提供多语言转换功能(一般是$t)？
目前国际上大多数方法都是基于i18n的，我们不用再造轮子了。然而，对于i18n的特定用途，有许多不同的NPM模块。如vuex-i18n、vue-i18n、simplest-i18n等。因为大部分复杂的项目都会去vuex，所以复杂的项目选择vuex-i18n比vue-i18n更方便。
而最简单的——i18n，一个很小的模块，其实也有它的优势。它支持以下写法：
在模板中：
Span$t(真实姓名，真实姓名)/span
或者在JS中：
这个。$t(实名，实名)
语言会写在一起，$t函数的每个参数都是一种语言，一目了然。这是小型项目的一个选择。
其基本用途如下：
T.js文件：
从“simplest-i18n”导入i18n；
从导入getLang././get lang ；
const t=i18n({
区域设置：getLang.lang，//当前语言
Locales: getLang.langs //支持的语言列表
});
导出默认t；
然后在应用程序的入口文件中展开Vue.js:
从导入t。/t ；
Vue。$ t=Vue.prototype. $ t=t
通过这种方式，方法$t被挂载到整个Vue.js世界中，Vue实例也可以通过它被访问。$t，用起来很简单。
然而，对于大型项目，在代码中编写所有语言包对维护并不友好。而且也解决不了我用的Vux组件的多语言问题。
所以，最终我选择了vuex-i18n作为基础。
(2)组织和处理语言包的工具3354如何组织和打包语言包？
对于这个问题，我首先需要解决Vux的第三方组件的多语言问题。
首先，在语言包的组织中，编写JSON配置文件是很常见的。不过最后还是采用了Yaml的格式，支持多语种字段一起写。例如：
config.yml
确认：
Zh-CN:确认
请确认
而不是像下面这样将一个领域的多种语言拆分成几个地方，例如：
确认：确认
确认：确认
这样做的好处是，您可以轻松地比较一个字段的不同语言版本，当您想要修改或删除一个字段时，您可以在一个地方完成，无需切换。除此之外，Yaml文件的语法更加简单明了，省去了JSON文件必须写双引号、没有注释等诸多麻烦。
其次，我在语言包的包装里发现了vux-loader。可以与现有的webpack配置结合，不仅可以封装Vux组件的多语言配置，还可以允许在自定义Vue组件中使用i18n标签。例如，在自定义组件中，我可以这样写：
i18n
确认：
Zh-CN:确认
请确认
i18n
打包时，vux-loader会将i18n标签中的多语言配置信息导出到我们配置的Yaml文件中，并从我们的定制组件中删除i18n标签。
那么，Yaml文件呢？可以使用json-loader和yaml-loader。他们可以把Yaml文件转换成我们需要的json格式，方便在JS函数中使用，就像这样：
const components locales=require( JSON-loader！yaml-loader！/./locales/components . yml )；//这将获取语言包的json格式
3、如何通知后端接口返回何种语言的数据？
因为很多接口都要通知后端使用哪种语言，所以我选择了使用header。在axios的拦截器中，header: Accept-Language被统一添加到请求中，该值的内容被设置为语言(例如zh-CN或en等。)应该是前端用的。这样，问题就在一个地方处理了。
三、具体实践中的一些细节
1、获取当前应该采用何种语言的getLang模块的实现
从导入{ getQueryObj }./utils/URL ；
从导入{ setItem，getItem }./utils/storage ；
const langs=[zh-CN ， en ]；//支持哪些语言？
const defaultLang= en//默认语言，暂时没有抛出。
函数getLang() {
let query=getQueryObj()；
let store lang=getItem( lang )；
让罗郎；
设flag=false
if(查询查询[lang]) {
rawLang=queries[ lang ]；
setItem(lang ，rawLang)；
}否则{
raw lang=store lang navigator . language；
}
langs.map(item={
if (item===rawLang) {
flag=true
}
});
返回标志？罗朗：defaultLang
}
const lang=getLang(langs，default lang)；
导出默认值{
Lang，//获取当前语言
Langs //支持的语言列表
}
2、Vux组件的多语言包的配置
你可以从Vux的官方github找到src/locales/all.yml并复制(同一目录下的src/locales/zh-CN.yml和src/locales/en.yml分别是其中文和英文部分)。根据自己的需求稍微修改一下就可以了。
然后在应用程序的门户文件中引入：
const vuxLocales=require( JSON-loader！yaml-loader！/./locales/all . yml )；
3、vux-loader的配置
在webpack.dev.conf.js中：
resolve(vuxloader . merge(devWebpackConfig，{
插件_目录：[
vux-ui ，
{
名称： i18n ，
vuxStaticReplace: false，
staticReplace: false，
extractToFiles: src/locales/components . yml ，
localeList: [en ， zh-CN]
}
]
}))
在webpack.prod.conf.js中：
resolve(vuxloader . merge(buildWebpackConfig，{
插件_目录：[
vux-ui ，
{
名称： i18n ，
vuxStaticReplace: false，
staticReplace: false，
extractToFiles: src/locales/components . yml ，
localeList: [en ， zh-CN]
}
]
}))
localeList: [en ， zh-CN]指定您的应用程序支持哪些语言。
并提取到文件：“src/locales/components.yml”是指定在定制组件中使用的那些i18n标记中的语言包信息，应该将Yaml文件导出到该文件。也就是说，您在每个定制组件中使用的i18n标签中的语言包信息将被vux-loader集中提取到这个文件中。
然后将这个语言包文件引入应用程序的入口文件：
const components locales=require( JSON-loader！yaml-loader！/./locales/components . yml )；
4、自定义组件内外文案的多语言化
(1)对于自定义组件内部副本的多语言信息，只需写在组件的i18n标签中即可。同时，为了避免不同自定义组件中多语言字段的命名冲突，在每个字段的名称前加上组件名称-类型。
(2)对于页面标题、一些错误提示等文案，它们出现在组件之外，所以不适合写在组件的i18n标签中。因此，我们单独创建一个新的global.yml来存储这些全球多语言信息。这些内容可以直接写在global.yml中，为了不与其他语言包字段冲突，我们在每个字段前加了global-。
然后将这个语言包文件引入应用程序的入口文件：
const components locales=require( JSON-loader！yaml-loader！/./locales/global . yml )；
5、vuex-i18n的实现
在src/store/index.js文件中：
从“vuex-i18n”导入VuexI18n
在导出默认新Vuex中添加。商店：
i18n: VuexI18n.store
在应用程序的门户文件中：
从“vuex-i18n”导入VuexI18n
从导入getLang././get lang ；
Vue.use(VuexI18n.plugin，store)；
const vuxLocales=require( JSON-loader！yaml-loader！/./locales/all . yml )；
const components locales=require( JSON-loader！yaml-loader！/./locales/components . yml )；
常量最终位置={
en :object . assign(vuxLocales[ en ]，componentsLocales[en])，
zh-CN :object . assign(vuxLocales[ zh-CN ]，componentsLocales[zh-CN])
}
for (let i in finalLocales) {
Vue.i18n.add(i，finalLocales[i])
}
vue . i18n . set(global vars . lang)；
6、图片的多语言化
图片中的文案信息多语言化主要有两种方式：一种是根据不同的语言显示不同的图片；二是尽可能将文字与图片背景分离，采用文字层和背景图片层的方式，使文字层可以作为普通文字使用，实现多语种。都比较简单，这里就不赘述了。
7、在当前页面通过按钮切换当前语言后，如何更新当前页面的内容？
如果你的应用不需要在页面内切换语言版本，直接通过URL输入不同的lang参数就可以了，不涉及这个问题。
第一种方法：刷新页面。
按钮@ click= changelang (zh-cn )中文/按钮
Button @click=changeLang(en )英语/button
changeLang(lang){
location.href=this。$utils.url.replaceParam(this。$router.history.current.path， lang ，lang)；
},
第二种方式：观察当前页面数据中lang字段的变化，通过v-if在本地刷新一些相关组件：
data(){
返回{
郎：这个。$i18n.locale()
}
}
changeLang(lang){
这个。$ i18n . set(lang)；
this.lang=this。$ i18n . locale()；
},
观察：{
lang(新瓦尔，旧瓦尔){
if(newVal===oldVal) {
返回；
}
//在这里，通过结合v-if改变标志位来触发本地组件的重新呈现。
}
}
第三种方式：结合vuex分发全局语言状态，收到状态变化时更新，或者干脆自己重写vuex-i18n的实现。这种方式比较复杂。
根据自己的业务需求选择。
8、Yaml中特殊字符的转义
一些yaml键值包含特殊字符，如[，]等。需要逃。转的方法是给键值加单引号。
如果您的语言包信息中有单引号，则必须使用两个单引号进行转义。例如：
str:“劳动节”
总结
关于Vue.js项目前端多语言解决方案的思路和实践这篇文章到此为止。更多Vue.js相关前端多语言内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。