<p><code></p> <p>刚学习vue不久,所以对vue了解还不是很深,一直处于边做边查的状态,这几天开发一个双语网站。<br />内容如下,希望对大家有帮助。<br />安装 vue-i18n插件<code>npm install vue-i18n</code></p> <p>1.首先是引进i18n</p> <p><span class="img-wrap"><img data-src="/img/bVXBos?w=202&amp;h=322" src="/img/bVXBos?w=202&amp;h=322" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <h2 id="articleHeader0">1.首先是引进i18n</h2> <p>然后在index.js中</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import VueI18n from 'vue-i18n' import Vue from 'vue' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'cn', // 语言标识 messages: { 'cn': require('./lang/cn'), // 中文语言包 'en': require('./lang/en') // 英文语言包 }, }) export default i18n " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>I18n <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-i18n'</span> <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> Vue.use(VueI18n) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> i18n = <span class="hljs-keyword">new</span> VueI18n({ locale: <span class="hljs-string">'cn'</span>, <span class="hljs-comment">// 语言标识</span> messages: { <span class="hljs-string">'cn'</span>: <span class="hljs-built_in">require</span>(<span class="hljs-string">'./lang/cn'</span>), <span class="hljs-comment">// 中文语言包</span> <span class="hljs-string">'en'</span>: <span class="hljs-built_in">require</span>(<span class="hljs-string">'./lang/en'</span>) <span class="hljs-comment">// 英文语言包</span> }, }) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> i18n </code></pre> <p>cn.js以及en.js中写入需要用到的中英文翻译内容<br />在main,<code>import i18n from './i18n' </code>//引入配置文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="new Vue({ el: '#app', router, store, i18n: i18n, render: h => h(App)<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Vue</span>({ <span class="hljs-attribute">el</span>: <span class="hljs-string">'#app'</span>, router, store, i18n: i18n, render: h =&gt; <span class="hljs-built_in">h</span>(App) })</code></pre> <h2 id="articleHeader1">2.在用到英文切换的模板中添加</h2> <p>由于此项目是在中文状态下默认显示英文按钮,在英文状态下显示中文按妞,所以这里的代码如下<br />(1)导航处</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<span class=&quot;label label-important&quot; :key=&quot;locale?'en':'cn'&quot; @click=&quot;changeLang()&quot;>{{lang}}</span>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code style="word-break: break-word; white-space: initial;">&lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"label label-important"</span> :key=<span class="hljs-string">"locale?'en':'cn'"</span> <span class="hljs-meta">@click</span>=<span class="hljs-string">"changeLang()"</span>&gt;{{lang}}&lt;/span&gt;</code></pre> <p>静态文案的地方</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <li> <router-link to=&quot;/indexCon&quot;>{{ $t(&quot;message.index&quot;) }}</router-link> </li> <p>//{{ $t(&quot;message.index&quot;) }}放你需要的翻译的内容" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code>&lt;li&gt; &lt;router-<span class="hljs-keyword">link</span> to=<span class="hljs-string">"/indexCon"</span>&gt;{{ $t(<span class="hljs-string">"message.index"</span>) }}&lt;<span class="hljs-regexp">/router-link&gt; &lt;/li</span>&gt; <span class="hljs-regexp">//</span>{{ $t(<span class="hljs-string">"message.index"</span>) }}放你需要的翻译的内容</code></pre> <p>此项目中由于后端要求中英文返回的值为0和1,所以此处用到了$cookie</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { locale: 'cn', lang:'ENG' } }, methods: { changeLang () { // 增加传入语言 if(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.locale=='cn'){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.lang='ENG'; <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.locale='en'; }else{ this.lang='中文'; this.locale='cn'; } this.$cookie.set('lng', this.locale=='cn'?'0':'1', 1); window.location.reload();//进行刷新改变cookie里的值 }</p> <p> }, mounted() { if(this.$cookie.get('lng')=='0'){ this.locale='cn'; this.lang='ENG'; }else{ this.locale='en'; this.lang='中文'; } this.$cookie.set('lng', this.locale=='cn'?'0':'1', 1); }, watch: { locale (val) { this.$i18n.locale = val; console.log(&quot;locale&quot;,val); } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>&lt;script&gt; export <span class="hljs-keyword">default</span> { <span class="hljs-keyword">data</span> () { <span class="hljs-keyword">return</span> { locale: <span class="hljs-string">'cn'</span>, lang:<span class="hljs-string">'ENG'</span> } }, methods: { changeLang () { <span class="hljs-comment">// 增加传入语言</span> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.locale==<span class="hljs-string">'cn'</span>){ <span class="hljs-keyword">this</span>.lang=<span class="hljs-string">'ENG'</span>; <span class="hljs-keyword">this</span>.locale=<span class="hljs-string">'en'</span>; }<span class="hljs-keyword">else</span>{ <span class="hljs-keyword">this</span>.lang=<span class="hljs-string">'中文'</span>; <span class="hljs-keyword">this</span>.locale=<span class="hljs-string">'cn'</span>; } <span class="hljs-keyword">this</span>.$cookie.<span class="hljs-keyword">set</span>(<span class="hljs-string">'lng'</span>, <span class="hljs-keyword">this</span>.locale==<span class="hljs-string">'cn'</span>?<span class="hljs-string">'0'</span>:<span class="hljs-string">'1'</span>, <span class="hljs-number">1</span>); window.location.reload();<span class="hljs-comment">//进行刷新改变cookie里的值</span> } }, mounted() { <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.$cookie.<span class="hljs-keyword">get</span>(<span class="hljs-string">'lng'</span>)==<span class="hljs-string">'0'</span>){ <span class="hljs-keyword">this</span>.locale=<span class="hljs-string">'cn'</span>; <span class="hljs-keyword">this</span>.lang=<span class="hljs-string">'ENG'</span>; }<span class="hljs-keyword">else</span>{ <span class="hljs-keyword">this</span>.locale=<span class="hljs-string">'en'</span>; <span class="hljs-keyword">this</span>.lang=<span class="hljs-string">'中文'</span>; } <span class="hljs-keyword">this</span>.$cookie.<span class="hljs-keyword">set</span>(<span class="hljs-string">'lng'</span>, <span class="hljs-keyword">this</span>.locale==<span class="hljs-string">'cn'</span>?<span class="hljs-string">'0'</span>:<span class="hljs-string">'1'</span>, <span class="hljs-number">1</span>); }, watch: { locale (<span class="hljs-keyword">val</span>) { <span class="hljs-keyword">this</span>.$i18n.locale = <span class="hljs-keyword">val</span>; console.log(<span class="hljs-string">"locale"</span>,<span class="hljs-keyword">val</span>); } } } &lt;/script&gt;</code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25461.html