Vue搭建中英双语网站的两种方法

冰镇屎壳郎

于 2024-08-24 21:27:42 发布

阅读量358

点赞数 4

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wechatonly/article/details/141504426

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue搭建中英文双语网站

第一种：vue-i18n

优势

1、不同的只是文本内容，其他部分可以最大限度的共用；

工作量分析

1、语言内容更新工作量o(n+1)；
2、样式布局更新工作量o(1)；

适合情况

1、不同网站仅文本内容不同，样式布局相同；
2、网站样式和布局更新频繁；
3、语言种类多；

教程

官网教程链接: vue-i18n教程

第二种：中英文文件分离

适合情况

1、中英文界面显示有差别，需要个性化显示的时候；
2、语言种类少，且样式更新少时；

工作量分析

1、语言内容更新工作量o(n);
2、样式布局更新工作量o(n);

实现方法：

一、文件结构

1、将所有的vue文件，原地都复制一遍，并在后面加上En或者Cn作为区分；
2、仅仅vue文件需要两套，其他的文件都是可以公用的，甚至都不需要修改路径。

二、方法

1、App.vue挂载在了id="app"的 div 上,现在把AppEn挂载在id="appEn"的 div 上；
index.html

 <body>
    <div id="app"></div>
    <div id="appEn"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

2、目前网站将显示两套内容，通过css可以设置其中的一套内容display:none，那么就只会显示一套内容了；
style.css

#app {
  margin: 0 auto;
  text-align: center;
}
#appEn{
  margin: 0 auto;
  text-align: center;
  display: none;
}

3、路由结构设计
router.js

import Home from "./views/Home.vue"
import HomeEn from "./views/HomeEn.vue"
const routes = [
  { path: "/", component: Home},
  { path: "/en", component: HomeEn },];

4、创建切换按钮english/chinese，通过js控制中英文切换
button:@click=“chinese”/@click=“english”
App.vue

<script setup>
import router from "./router";
function english() {
  const app = document.getElementById("app");
  app.style.display = "none";
  const appEn = document.getElementById("appEn");
  appEn.style.display = "block";
  router.push("/en" + router.currentRoute.value.path);
}
</script>

AppEn.vue

<script setup>
import router from './router';
function chinese() {
  const app=document.getElementById('app');
  app.style.display='block';
  const appEn=document.getElementById('appEn');
  appEn.style.display='none';
  router.push( '/' );
  
}
</script>