Vue多语言项目如何以最少重复代码实现组件LTR/RTL条件渲染？

核心思路是利用HTML原生dir属性+CSS逻辑属性/全局类实现全量RTL适配，完全不需要写两份重复模板，适配逻辑一次配置全局生效。

第一步：全局挂载RTL标识并配置根节点属性 #

1. 先在项目入口处将「当前语言是否为RTL语言」的状态挂载到全局，供所有组件直接调用：

   // Vue2 示例（main.js中配置，假设你已经完成vue-i18n初始化）
   import Vue from 'vue'
   import i18n from './i18n'
   
   Vue.prototype.$isRTL = () => i18n.locale === 'ar'
   
   // Vue3 示例（main.js中配置）
   import { createApp } from 'vue'
   import i18n from './i18n'
   const app = createApp(App)
   app.config.globalProperties.$isRTL = () => i18n.locale === 'ar'
   

2. 在项目根节点（App.vue最外层容器或public/index.html的body标签）动态添加原生dir属性和全局RTL类名：

   <!-- App.vue 示例 -->
   <template>
     <div 
       :dir="$isRTL() ? 'rtl' : 'ltr'" 
       :class="{'rtl-layout': $isRTL()}"
     >
       <!-- 所有路由、子组件全部放在该容器内 -->
       <router-view />
     </div>
   </template>
   

   HTML原生的dir属性会让浏览器自动完成基础适配：默认文本对齐改成右对齐、行内/行内块元素排布顺序自动反转，你原来需要调换顺序的按钮、文本等元素，不需要改模板代码，浏览器会自动调整排布。

第二步：全局样式基础适配 #

在全局样式文件中添加通用适配规则，不用每个组件单独写对齐逻辑：

/* 全局通用样式 */
[dir="rtl"] {
  text-align: right;
}
[dir="ltr"] {
  text-align: left;
}

/* 推荐优先用CSS逻辑属性，无需写任何条件自动适配双语言 */
.common-item {
  /* 代替margin-left：LTR场景是左间距，RTL场景自动变成右间距 */
  margin-inline-start: 12px;
  /* 代替padding-left：逻辑同上 */
  padding-inline-start: 8px;
  /* 代替border-left：逻辑同上 */
  border-inline-start: 1px solid #eee;
}

第三步：特殊场景适配 #

如果有个别元素需要单独调整RTL场景下的样式，直接结合全局的rtl-layout类写样式即可，不需要修改模板结构：

/* 例如RTL场景下左箭头图标需要翻转 */
.arrow-left {
  transform: rotate(0);
}
.rtl-layout .arrow-left {
  transform: rotate(180deg);
}

/* 例如RTL场景下绝对定位的按钮需要换位置 */
.submit-btn {
  position: absolute;
  left: 20px;
}
.rtl-layout .submit-btn {
  left: auto;
  right: 20px;
}

最终你的组件模板可以简化为 #

完全不需要写两份重复结构，一份模板自动适配双语言：

<template>
<div>
    <h1>{{ $t('message') }}</h1>
    <p>{{ $t('lorem_ipsum') }}</p>
    <button type="button">Button</button>
</div>
</template>

<style scoped>
/* 有特殊适配需求就写逻辑属性或者配合rtl类调整，不需要修改模板 */
h1 {
  margin-inline-end: 16px;
}
</style>

额外注意点 #

• 布局优先用flex，dir=rtl配置后flex项的排列顺序会自动反转，不需要手动改order属性
• 如果你用的是ElementUI、Vuetify等成熟UI框架，框架本身自带RTL开关，开启后框架组件会自动适配RTL场景

内容的提问来源于stack exchange，提问作者plymouth_93