vue文件importDeclaration未生效

seayao commented 1 year ago

i18n.config.js中vue的配置如下：其中 @/locales 是我对vue-i18n进行了二次封装处理

 vue: {
      caller: '',
      functionName: '$t',
      customizeKey: function getCustomizeKey(key) {
        return key
      },
      importDeclaration: 'import { $t } from "@/locales"',
    },

但是在有些vue文件中并未引入import { $t } from "@/locales", 我猜测是因为作者判断了如果只在template中使用了$t（或者其他判断）,就不再引入了，但是props，filters等中如果不引入import { $t } from "@/locales"是不能直接使用$t的；而且当前vue文件中中没有待处理的中文，不代表后续不会加入。所以建议：如果配置了importDeclaration: 'import { $t } from "@/locales"',就无条件引入import { $t } from "@/locales"

IFreeOvO commented 1 year ago

我不建议自动加。因为有的项目如果装有eslint，使用 import { $t } from "@/locales"会因为$t没有使用这个变量，IDE工具会报红。所以按需引入更合适

seayao commented 1 year ago

我不建议自动加。因为有的项目如果装有eslint，使用 import { $t } from "@/locales"会因为$t没有使用这个变量，IDE工具会报红。所以按需引入更合适

但是报红的话可以发现问题。如果在props、filters、mixins等使用$t，其实是不会有引入语句的：import { $t } from "@/locales"，但是会报错，因为在props、filters、mixins等 this的指向是 undefined，会导致js报错，我认为js报错的风险比eslint更大，或者可以再多一个配置，类似是否始终引入...

IFreeOvO commented 1 year ago

我感觉我理解错了你的意思。importDeclaration当时我是为了给vue3使用加的，因为vue2通常使用的i18n时，是全局注入的，不需要额外import {$t}进来。然后看你的说明，感觉你是在vue2使用的，所以没我明白什么场景下vue2的.vue文件，需要导入import { $t } from "@/locales"？

然后呢，你这边能举个props、filters、mixins等使用$t，不引入语句的：import { $t } from "@/locales"报错的例子么？配合我这边，帮你看下是什么问题。因为我理解的是props、filters、mixins它里面应该是用this.$t

seayao commented 1 year ago

是这样的：最开始我是使用i18n.config.js中默认配置： caller是this，importDeclaration为空，如下：但是经过我的实际操作发现存在以下问题：源文件：

<template>
    <div>
        我只是测试一下
    </div>
</template>

<script>
export default {
    props: {
        meaasge: {
            type: String,
            default: '测试'
        }
    }
}
</script>

转换后：

<template>
  <div>{{ $t('我只是测试一下') }}</div>
</template>
<script>
export default {
  props: {
    meaasge: {
      type: String,
      default: function () {
        // 这里会报错，因为this为undefined
        return this.$t('测试')
      },
    },
  },
}
</script>

因为vue中的props或者filters或者mixins或者路由的钩子函数中是不能直接使用this的（this为undefined），于是我修改了i18n.config.js配置文件如下：不使用this，并且希望全部vue文件都能从我自定义的locales.js文件中引入一个$t(import { $t } from "@/locales")，上述源代码转换后如下：

<template>
  <div>{{ $t('我只是测试一下') }}</div>
</template>
<script>
export default {
  props: {
    meaasge: {
      type: String,
      default: function () {
       // 此处会报错，因为缺少了import { $t } from "@/locales"'
        return $t('测试')
      },
    },
  },
}
</script>

可以发现它并没有为我引入$t,也会导致报错。 locales.js的内容大概如下：

大致总结一下：其实我是希望通过这个配置：可以为每个vue文件都添加import { $t } from "@/locales"'，且不使用this.$t，而是使用$t（我自己封装的）; 但是实际操作中会出现未能正确引入$t的情况；

seayao commented 1 year ago

我为什么要这么做？项目中的文件太多大概有几千个.vue文件（微应用），如果一个个检查这些vue文件中的props或者filters或者mixins或者路由的钩子函数中如果使用的this.$t，其实是错误的，我还需要额外再引入一个$t，再将this.$t的写法改为$t才行；存在很大的未知风险。如果能够通过如下配置：能为每个vue文件引入$t，不再使用this进行调用，则是一个万全之策。

IFreeOvO commented 1 year ago

给你加个了个配置，vue规则里加forceImport:true。 PS: 我自己跑了一下属性里直接用this。

props: {
    msg: {
      type: String,
      default: function () {
        return this.$t('你好')
      },
    },
  },

没有报错。难道跟vue版本有关? Σ(⊙▽⊙"a

seayao commented 1 year ago

给你加个了个配置，vue规则里加forceImport:true。 PS: 我自己跑了一下属性里直接用this。
props: {
    msg: {
      type: String,
      default: function () {
        return this.$t('你好')
      },
    },
  },
没有报错。难道跟vue版本有关? Σ(⊙▽⊙"a

我创建一个空项目测试了下，确实是有问题的：改成如下就可以了：

IFreeOvO commented 1 year ago

我是说default写成这样，是不报错

default: function () {
        return this.$t('你好')
   },

直接default:this.$t('你好')肯定不行

seayao commented 1 year ago

我是说default写成这样，是不报错
default: function () {
        return this.$t('你好')
   },
直接default:this.$t('你好')肯定不行

是的，但是以前写法不规范，没办法全部兼容了。

IFreeOvO commented 1 year ago