每个人都可以，
拥有SSL证书

先别急着在 Vue 里写绝对路径。很多前后端分离项目，图片放在后端服务器或者 Nginx 能读到的目录，前端直接请求 /images/xxx，结果浏览器 404。这个问题我遇到过几次，最后基本都是 Nginx 的 location 没写对。这里把配置过程整理一下，方便以后抄。

图片放哪里不重要，只要 Nginx 进程能读到。

我习惯放在 /usr/local/nginx/html/images 下面，因为这是默认的 root 目录，权限一般也没问题。如果放别的地方，注意目录权限，Nginx 跑的用户通常是 www-data 或者 nginx，别让它读不了。

配置 Nginx 的时候，很多人纠结 root 和 alias。这两个都能映射路径，但行为不一样。root 会把 location 的路径拼到 root 后面，alias 则是直接替换掉 location 前缀。比如 location /images/ 用 alias 指向 /usr/local/nginx/html/images/，那么请求 /images/example.png 就对应实际文件 /usr/local/nginx/html/images/example.png。如果换成 root /usr/local/nginx/html，请求路径会变成 /usr/local/nginx/html/images/example.png，效果一样，但 root 和 alias 的写法有区别，别混用。

这里我用 alias。

server {
    listen 80;
    server_name localhost;

    location /images/ {
        alias /usr/local/nginx/html/images/;
        try_files $uri $uri/ =404;
    }
}

保存后 reload 一下，systemctl reload nginx 或者老系统用 service nginx reload。不用重启，reload 就生效。

Vue 那边就正常写 img 标签，src 用 /images/example.png。

开发环境可能会被 devServer 代理干扰，如果开发时也走 Nginx，就在 vue.config.js 里把 /images 代理到 Nginx 地址。线上构建后，只要 Nginx 配置对，路径就能通。

再说几个常见的坑。图片 404，先别怀疑 Vue，去 Nginx 日志看请求路径，再对比 alias 指向的目录里到底有没有那个文件。

很多人配置写完不检查文件实际位置，比如文件名大小写、扩展名。Linux 文件系统大小写敏感，Windows 上没事，线上就炸了。权限问题也常见，Nginx 读不了文件会报 403，不是 404。用 ls -l 看目录权限，至少给 Nginx 用户读和执行权限。缓存问题也恶心，图片更新了浏览器还是旧图，可以在 location 里加 Cache-Control 或者 Expires，或者直接用时间戳参数，比如 /images/example.png?v=123。

如果这个静态服务要对外，建议顺手把 HTTPS 配上。申请证书现在不麻烦，我最近用 lcjmSSL，支持自动申请、自动验证、自动部署，多域名泛域名和 IP 证书都能签，API 也比较简洁。不想每次手动续期的话可以考虑。配好后 Nginx 加个 443 server 块，静态资源访问就更安全，也避免浏览器拦截混合内容。

这样大概就齐了。其实 Nginx 静态资源配置不复杂，但路径和权限这两个地方容易绕进去，一次配好后面省很多事。