首页   >   代码编程   >   WEB前端

Nginx部署Vue项目并配置多个不同的代理转发

vue为我们提供了两种路由模式:hashhistory,如果使用hash模式,那么在url上就会带有#号,页面之前的切换都是由vue-router自己来控制的,所以我们部署到服务器上之后,无需做额外的配置就可以使用,可一旦我们想要是用history模式,如果不做额外配置,那就会发现一件神奇的事情,从首页index.html开始一层层访问的时候一切正常,一旦你想直接访问首页之外的一个url就会出现404。

Nginx部署Vue项目并配置多个不同的代理转发

如上图,官方已经明确说明,因为vue单页客户端应用的性质,若想要直接访问而不404,那就需要后端提供支持,为此,vue-router官网也给我们推荐了各种后端(如:Apache、Nginx)配置的的方案来解决这个问题,我使用的就是Nginx来解决。

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

上面是官方给的配置案例,比较简单,我的Nginx安装在/usr/local/nginx目录下,那对应的文件目录就是/usr/local/nginx/html,这个html目录下默认放了index.html50x.html两个页面,是Nginx的默认页面,所以一般不建议去动这个两个文件,可以在root中指定项目自己的文件路径

location / {
root html/h5;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}

还有一种写法

location / {
root html/h5;
index index.html index.htm;
try_files $uri $uri/ @router;
}

上述配置中,是在/usr/local/nginx/html目录下新建了一个h5文件夹,然后将Vue项目打包之后的dist文件夹中的所有文件全部拷贝过去,首页index.html文件的路径就是/usr/local/nginx/html/h5/index.html,如果配置的过程顺利,那么404的问题就可以得到解决了。

本来到这里就已经结束了,但是呢,有的时候你会发现另一种情况,那就是根目录被占用了,或者说因为各种原因导致根目录用不了(如:Nginx部署了多个vue项目Nginx代理了多个服务),那么此时就不能配置location /了,需要配置location /xxx才可以,相对应的try_files也需要修改一下。

upstream front {
server 127.0.0.1:8080;
}
server {
location /h5 {
root html;
try_files $uri $uri/ /h5/index.html;
}

location / {
proxy_pass http://front;
proxy_set_header Host $host;
proxy_set_header Cookie $http_cookie;
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

如果对Nginx有一定了解的人,看到上面的配置肯定不会陌生,但是大家一定要注意一点,location /xxxtry_files中的/xxx/index.html不能随便乱写,一定要和你在html目录下新建的文件夹名字相同,文件夹叫abc,那这里的两个值就要写abc,否则要么404,要么就是500

雨落无影

QQ群Ⅰ: 686430774

QQ群Ⅱ: 718410762

QQ群Ⅲ: 638620451

QQ群Ⅳ: 474195684

QQ群Ⅴ: 463034360

QQ群Ⅵ: 879266502

QQ群Ⅶ: 627786015

工作5分钟,吹逼2小时: 855525339 (娱乐消遣,广告狗勿进)

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2021-07-25

永久地址:https://www.jiweichengzhu.com/article/34c26641a8354b4cb9222fef54c263fd

评论

雨落无影

关注上方公众号,回复关键字【下载】获取下载码

用完即删,每次下载需重新获取下载码

若出现下载不了的情况,请及时联系站长进行解决