嘿，老铁！今天咱们聊聊 Vite 的静态资源引用到底是怎样的一场“奇迹”。别以为这是一段枯燥无味的技术文档，我保证会让你听得津津有味，甚至还会让你在代码里捡到几颗隐藏的小宝石。

说实话，我第一次接触 Vite 就被它快到飞起的热启动打得目瞪口呆。原来一切dou是因为它把 ES 模块直接跑进浏览器，而不是像 Webpack 那样先打包成 bundle 再跑。

但当你想把图片、字体或者 JSON 放进去时却发现自己手里的代码像闹了个小龙卷风——路径乱七八糟，报错不断。

方式一：

// 在 JS 或 TS 文件里直接导入
import logo from '@/assets/logo.png';

这个方法Zui直观——只要写个 import 就Neng拿到图片地址。Vite 会把 logo.png 编译成一个 URL，然后自动替换进代码。

方式二：

// 用 new URL 来处理动态路径
const imgUrl = new URL.href;

当你需要根据变量拼接文件名时用 new URL Neng保持模块图正确解析，否则直接拼字符串就会失效。

方式三：

@import url;

CSS 中Ke以用 @import 把外部样式表拉进来但记得加上正确的相对路径，否则浏览器会找不到文件。

说起来这个问题我经常被问到。其实原因hen简单：百度抓取器主要关注的是页面内容与结构，而不是前端构建工具本身。若你的页面使用了 Vite 打包后出现了路径错误或资源加载失败，抓取器自然就拿不到完整内容，也就不会被收录。

Baidu 的爬虫不会执行 JavaScript，也就是说Ru果你的重要内容是通过 JS 动态渲染出来的，那它根本kan不到这些内容。所以在 SEO 优化时一定要确保关键内容Ke以被服务器渲染或者至少Neng以纯 HTML 的形式呈现给爬虫。

A 老兄，你可NengYi经习惯了在项目中写 /src/assets/xxx 的长路径，但那又太长了呀！Vite 提供 resolve.alias 功Neng，让你只需一句话搞定整个目录映射。

export default defineConfig({
  resolve: {
    alias: {
      '@assets': path.resolve
    }
  }
});

"噢哟，那可真方便。" 对吧？只要改完配置，再也不用担心路径走丢啦。

import avatar from '@assets/images/avatar.png';

"嗯，对！" Ru果你之前还在用旧路径，那就赶紧改掉，否则构建时就会报错：Module not found… 那可不好玩儿啊。

@public：/public 文件夹下的文件会原封不动地拷贝到 dist/，URL 一般是 /filename.ext；

@assetsInclude：`vite.config.ts` 中设置 assetsInclude Ke以让 Vite 把指定后缀识别为静态资源，也Neng被打包进 bundle 或单独文件；

@build.assetsDir：`build.assetsDir` 用来指定Zui终产物中资源文件夹的位置，例如 `static/`；

@build.assetsInlineLimit：`4096` 默认阈值，小于此值会内联成 base64，大于则单独打包；Ru果想调大，Ke以改成 `8192` 或geng高；;

@build.rollupOptions.output.assetFileNames：`` 用来控制产物命名格式，让 CDN geng易管理；.

export default defineConfig({
  base: 'https://cdn.example.com/static/',
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'static/'
      }
    }
  }
});

"哎呀，这么写好像太繁琐…" 别担心，只要改一次配置，就Neng让所有静态资源dou走 CDN 路线，大大提升加载速度。

async function loadTheme {
  const cssRaw = await import;
  const style = document.createElement;
  style.textContent = cssRaw.default;
  document.head.appendChild;
}
loadTheme;

"噢哟，这么点代码就Neng动态切换主题，还Neng按需加载，不会一次性把所有主题塞进 bundle，这才叫Zuo高效！"

export async function getLocaleData {
   // ?raw 防止 webpack 自动转换成 url
   const data = await import;
   return JSON.parse;
}
console.log);

// 引入 worker
import MyWorker from './worker.js?worker';
const worker = new MyWorker;
worker.postMessage;
worker.onmessage = e => console.log;
// 或者手动构造
const w = new Worker, { type:'module'});
w.postMessage;
w.onmessage=e=>console.log;
// 若想内联
const inlineW= new Worker,{type:'module', name:'inline'} );