如何在VueJS 2中指定外部图片存储位置？

Question

通常，vue中的图像都在其中

 <project-root>/src/assets

但是我需要为图像存储指定外部位置，例如：

/Users/tom/imageStore

所以现在

<img src="images/one.jpg">

已映射到

/Users/tom/imageStore/images/one.jpg

这将使Production Vue应用程序（从dist文件夹运行）独立于图像存储。我可以将新图像存储在外部存储中，而不必每次将新内容存储在imageStore中时都进行生产构建vue应用。

Answer 1

请记住，要使您的网站显示任何图像，您的图像都必须最终进入生产版本。也就是说，使用npm run build，图像被复制到dist文件夹中。这意味着webpack特别需要知道如何查找图像。通常，我建议不要将图像保留在项目之外。为什么？因为这会干扰源代码控制软件。图像是项目不可或缺的一部分，没有它，您的应用程序看起来就坏了。

如果由于某种原因您仍然希望使用不同于您在Vue文件中编写的路径的方式来访问它们，那么我认为您可以使用符号链接。符号链接同步两条路径。如果将<projectRoot>/images符号链接到/Users/tom/imageStore/images，它应该能够在其中找到您的图像。如果不负责任地使用此类符号链接，也可能导致安全漏洞。

如果图像在项目中，但是您想使用其他路径来处理它们，则可以在webpack配置中创建别名。 webpack别名会将具有特定名称的路径解析到其他目录。这对于脚本中的导入同样有效。

Answer 2

一种简单的解决方案是利用devserver proxy进行images路由代理到通过serve之类的简单服务器提供服务的本地目录。

您的应用请求图像后，就会从public以外的其他文件夹中提供图像。

在生产中，您可以利用nginx的location块来提供应用程序其余部分以外的其他文件夹中的图像。或者，您可以配置nginx以从Amazon s3存储桶提供服务。随便你。