您现在的位置是:网站首页 > 代码编程 > WEB前端WEB前端

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

不忘初心 不忘初心 2021-07-25 围观() 评论() 点赞() WEB前端

简介:vue如果使用了history模式,直接访问url就会出现404,那么该如何解决呢?配合nginx使用。那么vue项目如何部署到nginx服务器,nginx如何部署vue项目?一旦碰到nginx代理多个服务的时候,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

nginxvue

看完文章,有任何疑问,请加入群聊一起交流!!!

很赞哦! ()

文章评论

  • 请先说点什么
    人参与,条评论

请使用电脑浏览器访问本页面,使用手机浏览器访问本页面会导致下载文件异常!!!

雨落无影

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

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

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

站点信息

  • 网站程序:spring + freemarker
  • 主题模板:《今夕何夕》
  • 文章统计:篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们