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" />

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

但是他真的很方便!

相关推荐
稻草人22221 小时前
java Excel 导出 ,如何实现八倍效率优化,以及代码分层,方法封装
后端·架构
数据智能老司机2 小时前
精通 Python 设计模式——创建型设计模式
python·设计模式·架构
数据智能老司机4 小时前
精通 Python 设计模式——SOLID 原则
python·设计模式·架构
bobz9657 小时前
k8s svc 实现的技术演化:iptables --> ipvs --> cilium
架构
云舟吖7 小时前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
brzhang9 小时前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
Lei活在当下19 小时前
【业务场景架构实战】4. 支付状态分层流转的设计和实现
架构·android jetpack·响应式设计
架构师沉默1 天前
设计多租户 SaaS 系统,如何做到数据隔离 & 资源配额?
java·后端·架构
kfyty7251 天前
不依赖第三方,不销毁重建,loveqq 框架如何原生实现动态线程池?
java·架构
刘立军1 天前
本地大模型编程实战(33)用SSE实现大模型的流式输出
架构·langchain·全栈