`includeAssetsImportedByServer`

此配置是实验性的

默认情况下，生产环境客户端 bundle（即 /dist/client/assets/）中缺少仅在服务器代码中导入的静态资源（CSS、图片、...）

解决方法是确保所有资源至少从客户端代码导入一次。例如：

// /renderer/_default.page.server.js
// Environment: Node.js

// 如果我们只在此文件中导入 logo.svg，
// 那么 `logoUrl` 在生产环境中将是 `undefined`
import logoUrl from './logo.svg'

export function render() {
	return escapeInject`<html>
    <head>
      <!-- Favicon -->
      <link rel="icon" href="${logoUrl}" />
    </head>
    <!-- ... -->
  </html>`
}

// /renderer/_default.page.client.js
// Environment: Browser

// 解决方法：我们也在这里导入 logo.svg，即使我们没有在这个文件中使用它，
// 以使 Vite 在客户端包中包含 logo.svg
import './logo.svg'

虽然此解决方法适用于大多数应用程序，但对于纯HTML 应用程序来说很麻烦

我们还有个解决方案是可以将 includeAssetsImportedByServer 设置为 true

因为它是实验性的，我们建议仅对纯 HTML 应用程序使用 includeAssetsImportedByServer

例如：

// /**/*.page.server.js
// Environment: Node.js

// 此文件 *只* 在 Node.js 中加载

// 如果我们想要包含 `some-style.css` ，我们需要将
// `includeAssetsImportedByServer` 设置为 true，否则它将被忽略
import './some-style.css'

// 其他静态资源（如图像、字体等）也是如此
import imageUrl from './some-image.svg'

// 如果 `includeAssetsImportedByServer` 不是 `true`，则打印 `undefined`
console.log(imageUrl)

// vite.config.js

import { ssr } from 'vite-plugin-ssr/plugin'

export default {
	plugins: [
		ssr({
			includeAssetsImportedByServer: true,
		}),
	],
}

✍ Edit this page