以 Vue.js 生产模式上传的图像未显示答案

【问题标题】：Images uploaded in Vue.js production mode not showing以 Vue.js 生产模式上传的图像未显示
【发布时间】：2020-07-24 22:33:46
【问题描述】：

我对 Vue.js 有点陌生。我正在做一个社交媒体应用程序，允许用户上传和与他人共享图像。在开发过程中，我将图像存储在 src/assets 文件夹中。但是，当我构建项目时，所有图像都放在 dist 文件夹中。因此，我可以做些什么来让用户在生产中仍然上传图片？我是否在 dist 文件夹中创建资产目录？从那以后，我尝试了不同的方法，包括在后端存储图像。在这样做时，我相对引用了后端路径，例如使用 ../../../backend/public/assets...，它适用于开发。但是，当我构建时，构建时存在于后端目录中的图像是可见的，但是，每当我尝试将更多生产上传到 ../../../backend/public/assets ... 目录，它们已成功上传但不可见（即在生产中）。我收到一个错误，找不到模块 './image_name.image_extension'。我究竟做错了什么？我见过类似的问题，如this，但没有答案。

【问题讨论】：

您不应将图像上传到与您的 VueJS 应用程序相同的目录，而应上传到服务器上独立于您的应用程序的单独专用位置。
谢谢@Terry。那么我应该如何确保它们在应用程序的生产版本中可见？生产版本在哪里明确查找图像？因为它当前在生产中上传一个时会出现 Cannot find module 错误。

标签： vue.js vuejs2

【解决方案1】：

你必须设置你的公共路径并改变你的方式！

第一步是在你的根目录中创建 vue.config.js，如果你想了解更多细节，请阅读：https://cli.vuejs.org/config/

例如，我为我的文件定义前缀路径：

module.exports = {
  publicPath:
    process.env.NODE_ENV === "production" ? "/" : "/",
};

记住，最好使用“@”来定义路径。例如，如果要加载位于 src/assets/files/img/myImage.png 中的图像，则可以在模板部分中使用 @/assets/files/img/myImage.png 进行绑定或 . vue 文件！它总能帮助您找到正确的文件路径。

最后你的方式不是标准的，因为“src/assets/...”将用于编译的脚本和样式，以及你想在你的 UI 布局上使用的文件，比如静态图像。所以你必须使用“public/assets/...”目录来保存你的文件，然后你会看到一切都很顺利。

如果您还有其他问题或无法再次解决此问题，我会在这里解决您的问题。

【讨论】：

至于您提供的链接中描述的 publicPath，它是 您的应用程序包将部署在的基本 URL。此外，它说默认情况下，Vue CLI 假定您的应用程序将部署在域的根目录，我觉得我的应用程序就是这种情况。但是，我认为这里的关注点是 assetsDir？我之前在 vue.config.js 中集成了 assetsDir 以指向我的后端静态位置，如此处所述 github.com/vuejs/vue-cli/issues/1954 但我收到此错误 SyntaxError: expected expression, got '
当你想让 vue 管理你的上传路径时，通常我们会遇到同样的问题，正如我之前提到的，你必须设置 public/assets 而不是 src/assets。最后，您的后端必须访问您的公共目录并保存您的文件（然后您必须在后端目录中上传 vue 或在 vue.config.js 中设置更多配置，例如 assetsDir），但是，如果您只想管理您的路径-point 更好，因为这样您只需要向您的端点发送一个 post 请求，并通过 vue-axios 在您之前选择的每个目录中使用 NodeJs、PHP 等管理您的文件。