在elmentui项目中需要使用中英文多语言切换,也就是我们所说的国际化,在官方网文档里都是vue的模块化引用,如何在html通过js引用方式实现国际化呢。
通过 cdn 优化代码性能时,一般情况下会将vue、element-ui、vue-i18n 等静态资源从依赖中抽离,抽取之后的国际化如何实现?
index.html 文件
<!-- index.html --><!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>demo</title>
<!-- cdn start -->
<script src="//unpkg.com/vue"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vue-i18n/5.0.3/vue-i18n.min.js"></script>
<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<!-- cdn end -->
<script>
// 中文 Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
// 英文 // Vue.config.lang = 'en' // Vue.locale('en', ELEMENT.lang.en) </script></head><body>
<noscript>
<strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected --></body></html>
通过 CDN 的方式加载语言文件
<script src="//unpkg.com/vue"></script> <script src="//unpkg.com/element-ui"></script> <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script> <script> ELEMENT.locale(ELEMENT.lang.en) </script>

