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

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

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.json 或 jsconfig.json 中的 paths 选项:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@public/*": ["public/*"],
    },
    // ...
  },
  // ...
}

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

使用

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

import Logo from '@public/logo.svg'

document.querySelector('#app').innerHTML = `
  <img src="${Logo}" />
`

<script setup>
import Logo from '@public/logo.svg'
</script>

<template>
  <img :src="Logo" />
</template>

import Logo from '@public/logo.svg'

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

易错点

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

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

// 正常生效
import Logo from '@public/logo.svg'

// ！错误。这会向路径 `@public/data.json` 发出请求
fetch('@public/data.json')

<!-- ！错误。这会向路径 `@public/icon.svg` 发出请求 -->
<img src="@public/icon.svg" />

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

插件

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

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

// 直接使用静态资源路径！
fetch('/public/data.json')

<!-- 直接使用静态资源路径！ -->
<img src="/public/logo.svg" />

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

但是他真的很方便！