使用Vapor时如何在.vue文件中引用资产？

Question

我希望在部署时使用正确的URL在Cloudfront上分发资产。

我没有使用blade，因此无法使用资产助手。也没有任何文档。

Answer 1

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

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

例如

app.vue

/resources/js/views/app.vue

test.png

/resources/images/test.png

然后在您的app.vue中引用您的图像，如下所示：

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

所有内容编译完成后，您的图像将移至/ public目录。

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

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

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