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

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

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

简介：vue如果使用了history模式，直接访问url就会出现404，那么该如何解决呢？配合nginx使用。那么vue项目如何部署到nginx服务器，nginx如何部署vue项目？一旦碰到nginx代理多个服务的时候，nginx如何部署多个vue项目？

vue为我们提供了两种路由模式：hash、history，如果使用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.html和50x.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 /xxx和try_files中的/xxx/index.html不能随便乱写，一定要和你在html目录下新建的文件夹名字相同，文件夹叫abc，那这里的两个值就要写abc，否则要么404，要么就是500。

nginx vue