Vue+antd 國際化--默認英文改成中文

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

antd針對vue默認使用的是英語，因此，在系統開發過程中，我們可能想使用中文，因此，就需要對我們的項目進行國際化操作了。

先看下我遇到的問題

<a-modal
      title="新增OTA升級信息"
      :width="880"
      :okText="提交"
      :cancelText="取消"
      :dialog-style="{ top: '20px' }"
      :visible="modal1Visible"
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
      <a-card
        hoverable="true"
        title=""
        headStyle="text-align:left;color:#606266;font-size:14px"
        bodyStyle="border:none"
      >
        <a-row align="middle" class="arow">
          <a-col :span="6"> </a-col>
          <a-col :span="6"> </a-col>
          <a-col :span="6"> </a-col>
          <a-col :span="6"> </a-col>
        </a-row>
      </a-card>
    </a-modal>

上述中 :okText="提交" :cancelText="取消"，雖然我設置了模態框的按鈕顯示為漢字，但實際上並不生效，如下：

 

 根據ant官方提供的文檔：https://www.antdv.com/components/locale-provider-cn/

我們針對入口文件App.vue進行如下設置

<template>
  <a-locale-provider :locale="zh_CN">
    <div id="app">
      <router-view />
    </div>
  </a-locale-provider>
</template>

<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";

moment.locale("zh-cn");
export default {
  name: "App",
  data() {
    return {
      zh_CN,
    };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

引入了中文包后，項目中的默認語言就變成了漢語。

 

 @天才卧龍的博客