Public Assets
public/ 目录中的所有资产将自动提供。
md
public/
image.png <-- /image.png
video.mp4 <-- /video.mp4
robots.txt <-- /robots.txt
package.json
nitro.config.ts
使用 Nitro 构建时，它会将 public/ 目录复制到 .output/public/ 并创建一个包含元数据的清单：
json
{
"/image.png": {
"type": "image/png",
"etag": "\"4a0c-6utWq0Kbk5OqDmksYCa9XV8irnM\"",
"mtime": "2023-03-04T21:39:45.086Z",
"size": 18956
},
"/robots.txt": {
"type": "text/plain; charset=utf-8",
"etag": "\"8-hMqyDrA8fJ0R904zgEPs3L55Jls\"",
"mtime": "2023-03-04T21:39:45.086Z",
"size": 8
},
"/video.mp4": {
"type": "video/mp4",
"etag": "\"9b943-4UwfQXKUjPCesGPr6J5j7GzNYGU\"",
"mtime": "2023-03-04T21:39:45.085Z",
"size": 637251
}
}
这使 Nitro 无需扫描目录即可了解公共资产，从而通过缓存标头提供高性能。
Server Assets
assets/ 目录中的所有资产都将添加到服务器包中。
它们可以通过使用 useStorage('assets:server') 的 assets:server 挂载点来寻址
Keys can be written assets/server/my_file_path or assets:server:my_file_path.
Custom Server Assets
In order to add assets from a custom directory, path will need to be defined in the nitro config:
nitro.config.ts
js
import { defineNitroConfig } from 'nitropack/config'
export default defineNitroConfig({
serverAssets: [{
baseName: 'my_directory',
dir: './server/my_directory'
}]
})
nuxt.config.ts
ts
export default defineNuxtConfig({
nitro: {
serverAssets: [{
baseName: 'my_directory',
dir: './server/my_directory'
}]
}
})
They can be addressed by the key assets/my_directory/.
Examples
Example: Retrieving a json data from default assets directory:
js
export default defineEventHandler(async () => {
const data = await useStorage().getItem(`assets/server/data.json`)
return data
})
Example: Retrieving a html file from a custom assets directory:
nitro.config.ts
js
import { defineNitroConfig } from 'nitropack/config'
export default defineNitroConfig({
serverAssets: [{
baseName: 'templates',
dir: './templates' // Relative to `srcDir` (`server/` for nuxt)
}]
})
nuxt.config.ts
ts
export default defineNuxtConfig({
nitro: {
serverAssets: [{
baseName: 'templates',
dir: './templates' // Relative to `srcDir` (`server/` for nuxt)
}]
}
})
js
// routes/success.ts
export default defineEventHandler(async (event) => {
return await useStorage().getItem(`assets/templates/success.html`)
// or
return await useStorage('assets:templates').getItem(`success.html`)
})