|
以新建原生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项目为例：?
| 希望发布后的目录 | 当前开发目录 | | index.html
share.jpg assets/ 文件夹 img/ 图片文件夹 | public/ index.html index.css main.js vite.config.js …… |
?直接写结论：
| 发布后目录 | 调整后的开发目录 | | index.html
share.jpg assets/ 文件夹 img/ 图片文件夹 | public/ ? ? ? ? img/ 数据里引用的不希望改变文件名的图片文件 ? ? ? ? share.jpg? src/ ? ? ? ? assets/ 字体、常用的logo文件等 ? ? ? ? img/ 图片文件 index.html index.css main.js vite.config.js …… |
我新建了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"
},
......
]
|