vite 静态文件处理总结

以新建原生JavaScript项目为例
 

yarn create vite my-vue-app --template vanilla

会自动生成一个 public 文件夹，要注意vite官方文档里的几点：

如果你有下列这些资源：

 1. 不会被源码引用（例如 robots.txt）
 2. 必须保持原有文件名（没有经过 hash）
 3. ...或者你压根不想引入该资源，只是想得到其 URL。

请注意：

 1. 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png
 2. public 中的资源不应该被 JavaScript 文件引用

---------------------------------------干货分割线----------------------------------------
 
 以我常做的H5项目为例： 

 直接写结论：

我新建了src目录放我们的图片、字体等资源文件，而 public里的img里放的是不想改变名称的图片文件，一般是在js或json数据里调用的图片路径；

src/img/ 和 src/assets/下的文件，vite build 后，都会被加了hash（如：bgimg.2509af0e.jpg）后放入 dist/assets/ 里，初学者一般到这就不太理解了：因为发布目录里并不会一一对应我自建的src下的目录，而public下的目录和文件会被完整copy到dist下。

index.html 里的引用路径：

<!-- 在 src/img 里的普通图片、媒体文件，用相对路径 -->
<img src="./src/assets/logo.png" alt="" class="logo">
<img src="./src/img/g05.jpg" alt="">
<audio src="./src/assets/bgm.mp3" preload="auto" loop autoplay></audio>

<!-- 不想改变文件名的文件，在public下，用绝对路径 -->
<img src="/img/o2.png" alt="" />

index.css里的引用路径：都放入src/img/ 就可以了

@font-face {
    font-family: 'hy1';
    src: url('./src/assets/HY1.woff') format('woff'),
        url('./src/assets/HY1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.cover {
    position: absolute; left: 0; top: 0; width: 100%;  height: 100vh; z-index: 10;
    background: transparent url("./src/img/cbg.jpg") no-repeat center center;
    background-size: cover;
}

.icon {
    display: block;
    width: 90px; height: 90px;
    background: url(./src/img/icon-bg.png) repeat 0 0;
    background-size: 100%;
}

index.js里的引用路径：我们遵守上面提到的：“public中的资源不应该被 JavaScript 文件引用”

// js里要导入图片实例就放入 src/img/ 
import a1img from './img/a1.jpg';

// 数据里要用到的文件，不希望改变文件名，就放入 public/img/
let data = [
    {
        "num": "8",
        "date": "2022年2月18日",
        "name": "谷爱凌",
        "desc": "女子自由式滑雪U型场地技巧",
        "icon":"./img/a1.png"
    },
    ......
]