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

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

但是他真的很方便!

相关推荐
.豆鲨包2 小时前
【Android】MVP架构模式
android·架构
chenjianzhong2 小时前
vite-plugin-legacy 实战解析
前端·vue.js·vite
数据智能老司机3 小时前
Snowflake Cortex AI:面向生成式 AI 应用的解决方案——机器学习函数概览
大数据·架构·数据分析
数据智能老司机5 小时前
Snowflake Cortex AI:面向生成式 AI 应用的解决方案——理解 Snowflake Cortex
大数据·架构·数据分析
数据智能老司机5 小时前
Snowflake Cortex AI:面向生成式 AI 应用的解决方案——Snowflake 生态中的 AI/ML 入门
大数据·架构·数据分析
稻草人22225 小时前
打造个人Dify?手写AI工作流让AI乖乖听话 - 基础架构篇
架构
canonical_entropy6 小时前
告别经验主义:DDD的数学基础与工程实现
后端·架构·领域驱动设计
码界奇点7 小时前
2025时序数据库选型指南从架构基因到AI赋能的深度解析
人工智能·ai·架构·时序数据库
Light607 小时前
《领码 SPARK 融合平台》投资研究报告(最终完整版)
分布式·架构·spark·零信任·安全运营
shinelord明7 小时前
【大数据开发实践】Kafka REST Proxy~无缝集成 Kafka
大数据·分布式·架构·kafka