Vite 静态资源处理之隔壁小孩也看懂了

配置 vite.config.ts 中的 options.resolve.alias 选项:

ts 复制代码
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@public': ''
    }
  }
})

这会让Vite知道这个路径别名。

我们在小学二年级就学到过,Vite在打包时,public文件夹中的静态资源会被自动拷贝到根目录下, 所以你需要使用 import Logo from '/logo.svg' 而不是 import Logo from '/public/logo.svg'。 像上面那样配置后, @public/logo.svg 将会等价于 /logo.svg, 因为 @public 被配置为等价于一个空字符串''

然后,你会发现别名已经可以正常运行了,但是还没有智能提示。

配置 tsconfig.jsonjsconfig.json 中的 paths 选项:

yaml 复制代码
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@public/*": ["public/*"],
    },
    // ...
  },
  // ...
}

这会让vscode知道 @public/* 指向了 /public/*。现在开始,你就拥有ide的智能提示了!

使用

你可以在任何JS上下文中使用:

js 复制代码
import Logo from '@public/logo.svg'

document.querySelector('#app').innerHTML = `
  <img src="${Logo}" />
`
vue 复制代码
<script setup>
import Logo from '@public/logo.svg'
</script>

<template>
  <img :src="Logo" />
</template>
jsx 复制代码
import Logo from '@public/logo.svg'

export default function MyApp() {
  return (
    <img src={Logo} />
  );
}

易错点

我们在小学二年级语文课上,学到过这么一篇文章:共享选项 | Vite 官方中文文档 (vitejs.dev)

在文章中明确指出,alias配置项将会被传递到 @rollup/plugin-alias。而这个别名插件是在引入中处理别名的,也就是说:

js 复制代码
// 正常生效
import Logo from '@public/logo.svg'

// !错误。这会向路径 `@public/data.json` 发出请求
fetch('@public/data.json')
html 复制代码
<!-- !错误。这会向路径 `@public/icon.svg` 发出请求 -->
<img src="@public/icon.svg" />

你需要显式的引入这个文件,从而获得处理后的路径。

插件

今天早上日常刷discussion时,发现了这方面的讨论。我没有找到静态资源处理方面的插件,于是顺便就做了一个,开源在github: s3xysteak/vite-plugin-public-transform

这个插件非常简单粗暴:他在编译时,在你的代码中搜索匹配内容(比如 /public/ ),然后替换为正确的字符串。这样一来,你就能直接在任何地方使用静态资源,不需要显式引入,甚至在默认情况下(使用 /public/ 时)不需要配置 tsconfig.json,他用起来像这样:

js 复制代码
// 直接使用静态资源路径!
fetch('/public/data.json')
html 复制代码
<!-- 直接使用静态资源路径! -->
<img src="/public/logo.svg" />

显然这个插件相当简单粗暴,我不喜欢这样的方案,也不认为这样的方案是正确的道路。

但是他真的很方便!

相关推荐
月下点灯18 分钟前
✨项目上线后产品要求把应用字体改大点📏怎么办?一招教你快速解决🔧
前端·vite
梦中的天之酒壶26 分钟前
多级缓存架构
缓存·架构
李重楼1 小时前
Vite 默认端口启动被拒绝解决办法
vite
眠りたいです2 小时前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
虫小宝3 小时前
返利软件的分布式缓存架构:Redis集群在高并发场景下的优化策略
分布式·缓存·架构
一水鉴天4 小时前
整体设计 之 绪 思维导图引擎 之 引 认知系统 之 引 认知系统 之 序 认知元架构 之6 拼句 之1 (豆包助手 之8)
架构·认知科学
纪元A梦4 小时前
Redis最佳实践——安全与稳定性保障之高可用架构详解
redis·安全·架构
Dontla4 小时前
流行的前端架构与后端架构介绍(Architecture)
前端·架构
xiaohe06014 小时前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(三)
vite·rollup.js
熊文豪5 小时前
KingbaseES读写分离集群架构解析
数据库·架构·kingbasees·金仓数据库·电科金仓