使用vite插件可以扩展vite的能力，比如解析用户自定义的文件输入，在打包代码前转译代码。

插件钩子

  1. export default function(options){
  2.     return {
  3.       name: 'my-vite-plugin',
  4.     // 修改vite配置
  5.     config(){},
  7.     // vite配置确认
  8.     configResolved(){},
  10.     // 用于配置dev server
  11.     configureServer(){},
  13.     // 用于转换宿主页
  14.     transformIndexHtml(){},
  16.     // 创建自定义确认函数
  17.     resolveId(id){},
  19.     // 创建自定义加载函数，可用于返回自定义内容
  20.     load(id){},
  22.     // 可用于转换已加载的模块内容
  23.     transform(code){},
  25.     // 自定义hrm更新时调用
  26.     handleHotUpdate(){}
  27.   }
  28. }

手写一个vite插件

我们来实现一个多语言的插件吧。
image.png

1. 定义多语言文件

我们尝试把配置文件以标签的形式写在vue中。

  1. export default defineComponent({
  2.   name: 'App',
  3.   setup(){
  5.   }
  6. })
  7. </script>
  9. <i18n>
  10. {
  11.   "en": {
  12.     "language": "en",
  13.     "message": "this is message content"
  14.   },
  15.   "zh": {
  16.     "language": "中文",
  17.     "message": "我是消息的啊"
  18.   }
  19. }
  20. </i18n>

2. 引入vite插件

我们的vite需要解析这个i18n标签，就要自定义一个插件来实现。

  1. export default {
  2.   name: 'vite-vue-i18n',
  3.   transform(code, id){
  4.     // 将load进来的代码进行加工
  5.     if (/vue&type=i18n/.test(id)){
  6.       return `export default Components => {
  7.         Components.i18n = ${code};
  8.       }`
  9.     }
  10.     return null;
  11.   }
  12. }

加载插件，在vite.config.js中修改。

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import I18n from './plugins/vite-vue-i18n'
  5. // https://vitejs.dev/config/
  6. export default defineConfig({
  7.   plugins: [vue(), I18n]
  8. })

经过上面的配置，我们就可以在界面中发现已解析了i18n的标签。
image.png

3. 如何使用

加载的插件是挂载到vue实例当中的，所以我们需要从实例中获取。

  1. <script lang="ts">
  2. import { defineComponent, ref, getCurrentInstance, computed } from 'vue'
  4. export default defineComponent({
  5.   name: 'App',
  6.   setup(){
  7.     // 获取当前vue实例
  8.     const ins: any = getCurrentInstance();
  9.     const useI18n = () => {
  10.       const locale = ref('zh');
  11.       // 拿到实例中的i18n数据
  12.       const i18n = ins.type.i18n;
  13.       const t = (msg: string) => {
  14.         // t 返回一个计算属性，动态取值
  15.         return computed(() => i18n[locale.value][msg]).value;
  16.       }
  17.       return {t, locale};
  18.     }
  19.     const { locale, t } = useI18n();
  21.     return { locale, t }
  22.   }
  23. })
  24. </script>

vue模板文件

  1. <template>
  2.   <label>{{t('language')}}</label>
  3.   <select v-model="locale">
  4.     <option value="en">en</option>
  5.     <option value="zh">zh</option>
  6.   </select>
  7.   <p>{{t('message')}}</p>
  8. </template>

实现以上的功能，我们就完成啦。

😁