vue部署后静态文件加载404的解决

针对“vue部署后静态文件加载404的解决”，我给出了以下完整攻略：

问题描述

在vue应用部署到服务器后，访问页面时静态资源文件（如js、css、img等）出现404错误，该如何解决？

解决步骤

步骤一：修改配置文件

首先在vue.config.js文件中增加如下代码:

javascript module.exports = { publicPath: './' }

或者修改package.json 文件中的homepage字段如下：

javascript "homepage": "./"

如果你使用了vue-cli3来创建Vue项目，那么你需要在打包前加上--mode production参数，即npm run build -- --mode production, 否则publicPath的值会默认为 /, 这样即使正确配置 Apache 或 nginx 反向代理，也会出现404 问题。
如果publicPath设置为"./" 需要记得在部署后的HTML文件中引入对应的静态资源文件时路径和文件位置应该是相对路径和文件夹。否则部署后会发现资源文件没有找到。

步骤二：配置服务器

以 Nginx 为例，配置 Nginx 静态资源访问：

使用root指令配置静态文件路径：

```
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;

   # serve static files
   location / {
     try_files $uri $uri/ @router;
     index index.html;
   }

   location /static/ {
     alias /usr/share/nginx/html/static/;
   }

   location @router {
     rewrite ^.*$ /index.html last;
   }

}
```

这里的root字段根据Nginx实际目录填写，该目录即为Vue编译后的dist文件夹。

在Nginx 中，访问静态文件，需要 rewrite URL 到 index.html。因此，还需在 Nginx 配置文件中加入以下内容：

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

这样我们就完成了对静态文件的访问重定向配置。

步骤三：重启服务器

最后的一步是重启 Nginx。在 Ubuntu 系统中，可以使用以下命令重启：

sudo service nginx restart

至此，vue部署后静态文件加载404的问题就完美解决了。

示例说明

示例一：使用GitHub pages进行部署

假设我们已经将Vue项目打包好并上传到GitHub上的仓库demos中。在本地调试的时候可以直接打开dist文件夹中的index.html文件。但是，在github pages上打开网页却发现所有的静态资源都是404，代码如下：

//在 vue.config.js 中进行publicPath设置
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/demos/' : '/'
}

在以上代码中，我们给publicPath设置了相对路径'/demos/'，表示所有的静态资源都放在根目录的demos文件夹中，这样就可以加载到静态资源了。

示例二：使用微服务网关部署

假设我们使用微服务网关来进行部署，为了正常加载静态资源文件，需要对Nginx的配置文件进行修改。假设我们的网站前缀为prefix/path,则需要在Nginx的配置文件中加入以下内容：

server {
    listen       80;
    server_name  localhost;

    location /prefix/path/ {
        proxy_pass http://web-site-name;
        proxy_redirect http:// $scheme://;

        proxy_set_header Host              $host;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /prefix/path/static/ {
        alias /opt/web-static/;
    }

    location /prefix/path/favicon.ico {
        alias /opt/web-static/favicon.ico;
    }

}

解析

定义了 http://web-site-name 实际的上游服务器。
对 resource 的访问路径前缀为 /prefix/path/static/ 时，修改了实际的静态文件的读取路径。
对于特定静态文件 favicon.ico，对访问路径做了相应修改。
针对所有以 /prefix/path/ 开始的 URL，转换为 http://web-site-name 上游服务器的相应路径（去掉了 /prefix/path/）。
修改了 proxy_redirect 以适应上游服务器响应的 301/302 状态代码的 Location 值。

补充

在前缀为prefix/path的情况下，需要将静态资源文件放到网站的根目录的static文件夹中。同时，要注意Vue打包时部署publicPath一定要一致。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue部署后静态文件加载404的解决 - Python技术站