vite+vue3 代替require()的hooks

前言

最近发现动态去拼接资源路径还是挺常用的，于是把我之前封装的hooks单独分享出来。

教程

useAssets.ts

export function useAssets() {
    /** 前缀补路径斜杠 */
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    function addPrefixSlash(path: string) {
        return path.startsWith("/") ? path : `/${path}`;
    }
    /** 前缀去路径斜杠 */
    function removePrefixSlash(path: string) {
        return path.startsWith("/") ? path.slice(1) : path;
    }

    /**
     * @description: 获取assets路径
     * @param {string} path
     * @Date: 2023-08-03 17:35:35
     * @Author: copilot
     */
    function getAssetsUrl(path: string) {
        return new URL(`../assets/${removePrefixSlash(path)}`, import.meta.url).href;
    }

    /**
     * @description: 获取images路径
     * @param {string} path
     * @Date: 2023-08-03 17:41:23
     * @Author: copilot
     */
    function getImagesUrl(path: string) {
        return new URL(`../assets/images/${removePrefixSlash(path)}`, import.meta.url).href;
    }

    return {
        getAssetsUrl,
        getImagesUrl
    };
}

封装了两个方法，一个是比较通用的拼接assets目录路径的，另一个也是用的比较多的，去拼接assets中images目录的方法，需要注意的是，new URL中的相对路径需要自行根据自己的目录结构调整下，比如我在src/hooks目录下，那么../就能返回到src，所以路径就不用调整了。

使用

<template>
  <img :src="getImagesUrl('/games/logo.png')" alt="bg" />
</template>

<script setup lang="ts">
import useAssets from "@/hooks/useAssets";

const { getImagesUrl } = useAssets();
</script>

比较便捷的是我做了路径前面的/斜线处理，你可以不写，也可以加上。

在hooks也增加了目前没有用到的addPrefixSlash，看大家自己的需求可以自行新增更多便捷的hooks。