解决 Nginx 部署 Vue 项目路由出现 404 的问题

Monop

已于 2022-04-28 09:04:05 修改

阅读量1w

点赞数 3

文章标签： nginx vscode vue.js

于 2022-03-17 16:22:09 首次发布

本文链接：https://blog.csdn.net/m0_53251830/article/details/123553535

版权

1、下载nginx，将打包好的vue项目文件放到 nginx-1.20.2\html 文件夹里面

2、在 nginx-1.20.2\conf 文件夹下，修改 nginx.conf 文件的内容，也就是部署入口路由

nginx.conf :

server {
    listen      80;    //  设置运行端口
    server_name example.com;

    location / {
       root /home/example/dist;
       try_files $uri $uri/ @router; # 配置使用路由
       index  index.html index.htm;     
    }
    
   # 路由配置信息   解决路由跳转失败
   location @router {
     rewrite ^.*$ /index.html last;   
   }
}