在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>