laravel - 使用 Vapor 时如何引用 .vue 文件中的资源？

Question

因为我希望在使用正确的 URL 进行部署时将 Assets 分发到 Cloudfront 上。

我没有使用blade，所以我无法使用 Assets 助手。也没有这方面的文档。

Answer 1

您需要确保将图像存储在正确的位置，以便可以在构建时正确处理它们。

我犯了一个错误，将图像存储在/public 目录中。相反，请将图像存储在/resources 下，并在 .vue 文件中确保使用相对路径引用它们。

例如

app.vue

/resources/js/views/app.vue

测试.png

/resources/images/test.png

然后在您的 app.vue 中引用您的图像:

<img src="../../images/test.png" />

一旦一切都编译完毕，您的图像将移动到/public 目录。

然后，您需要通过 webpack.mix.js 文件注入(inject) CDN。确保将资源根设置为 CDN URL，该 URL 在构建时由 Vapor 通过 ASSET_URL 传入

/* Get the Vapor ASSET_URL */
const ASSET_URL = `${process.env.ASSET_URL || ''}/`

/* Set the resource root */
mix.setResourceRoot(ASSET_URL);