为啥我的 Vue 项目在本地能正常显示图片，部署到服务器就不行了？

Question

我开发了一个 Vue 项目，在本地运行 npm run serve 时，页面中的图片都能正常显示。但将项目打包部署到服务器（CentOS 7 系统，使用 Nginx 作为 Web 服务器）后，图片却显示不出来，页面上只显示图片的占位符。
我的 Vue 项目结构大致如下：

my-vue-project/
│
├── public/
│   ├── index.html
│   └── favicon.ico
│
├── src/
│   ├── assets/
│   │   ├── img/
│   │   │   ├── logo.png
│   │   │   └── bg.jpg
│   │   └── style.css
│   ├── components/
│   │   ├── MyComponent.vue
│   │   └──...
│   ├── main.js
│   └── App.vue
│
├── package.json
└──...

在 MyComponent.vue 中引用图片的代码如下：

<template>
  <div>
    <img src="@/assets/img/logo.png" alt="logo">
  </div>
</template>

在本地开发环境中，图片路径 @/assets/img/logo.png 能正确解析并显示图片。打包部署到服务器后，Nginx 配置如下：

server {
    listen       80;
    server_name  myserver.com;

    root   /path/to/my-vue-project/dist;
    index  index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

请问怎样才能让图片在服务器上正常显示呢？

尝试过的解决方案
检查图片路径：
确认在服务器上项目的dist目录下，图片文件确实存在于对应的路径中，通过ls命令查看无误。
检查 Vue 项目中图片引用路径，在打包后的index.html文件中，图片路径看起来是相对正确的，类似/assets/img/logo.png。
检查 Nginx 配置：
仔细检查 Nginx 配置文件，确保root指令指向了正确的项目dist目录。尝试修改try_files指令的参数顺序，问题依旧。
使用sudo nginx -t检查 Nginx 配置语法，无报错，然后用sudo systemctl reload nginx重新加载配置。
清除浏览器缓存：
在浏览器中多次清除缓存，包括强制刷新页面（Ctrl + F5），但图片仍无法显示。
检查文件权限：
确保服务器上项目目录及其所有文件权限设置正确，使用chmod -R 755 /path/to/my-vue-project/dist赋予了适当权限。

Answer 1

这个是我自己项目的配置,改下root试试

server
{
    listen 80;
    server_name www.alongweb.top;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/www.alongweb.top;

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-74.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/www.alongweb.top.conf;
    #REWRITE-END

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }

    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

     location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      24h;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$
    {
        expires      1d;
        error_log /dev/null;
        access_log /dev/null;
    }
    
    gzip_static on;
    location / {
      #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
      #try_files $uri $uri/ @router;
      try_files $uri $uri/ /index.html;
      index index.html index.htm index.htm.gz cms/index.html;
      #强缓存配置
      add_header Cache-Control "public, max-age=86400";
    }
    location @router {
      rewrite ^.*$ /index.html last;
    }
    
    access_log  /www/wwwlogs/www.alongweb.top.log;
    error_log  /www/wwwlogs/www.alongweb.top.error.log;
}

Answer 2

可能会有下面原因导致

1. 图片路径问题：Vue 在本地运行时，可能使用相对路径 (./assets/image.png)，但在服务器上需要使用绝对路径 (/assets/image.png)。
   解决方案：尝试修改 vue.config.js 中的 publicPath：

   module.exports = {
     publicPath: process.env.NODE_ENV === 'production' ? '/your-project-name/' : '/'
   };

2. Nginx 配置问题：Nginx 可能未正确处理 static 资源目录。
   解决方案：确保 Nginx 配置正确：

   location / {
       root /var/www/html/your-vue-project/dist;
       index index.html;
   }
   
   location /assets/ {
       root /var/www/html/your-vue-project/dist;
   }

3. 图片未正确打包：Vue CLI 默认会将 assets 目录中的静态文件打包到 dist 目录，检查 dist/assets/ 是否包含图片。
4. CDN 资源问题：如果使用了 CDN，请检查是否正确加载资源，或尝试本地存储图片。