「技术教程」vite+vue3 代替require()的hooks-Eswlnk Blog
智能摘要 AI
作者分享了一组用于拼接资源路径的自定义 hooks，名为 `useAssets`。该 hooks 提供了两个主要功能：一是获取 `assets` 目录下的资源路径；二是获取 `assets/images` 目录下的资源路径。代码通过 `URL` 对象生成相对路径，并支持自动处理路径前后的斜杠问题。用户只需导入 `useAssets` 并调用 `getImagesUrl` 或 `getAssetsUrl` 即可。此外，作者还添加了一个未使用的辅助函数 `addPrefixSlash`，以供扩展其他功能。此工具简化了资源路径拼接的工作，提升了开发效率。

前言

最近发现动态去拼接资源路径还是挺常用的，于是把我之前封装的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，所以路径就不用调整了。

「技术教程」vite+vue3 代替require()的hooks-Eswlnk Blog

使用

<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。