关于nginx部署vue项目的两个问题

2018-12-27 07:42:03来源：博客园阅读 ()

首先我使用的是后端接口+前端vue的形式，这样就涉及到跨域的问题。我是这样配置的：

server {
        listen       80;
        server_name  www.liangyp.xyz;//访问网址

        location / {
                root  /var/www/VueApp;
                index  index.html index.htm;
        }
                //这里是配置的如果访问apis则是转到后端接口，这样就避免了跨域
                location /apis {
                        rewrite  ^/apis/(.*)$ /$1 break;
                        proxy_pass   http://127.0.0.1:3000/;
       }
}

然后还遇到一个问题：我在vue中使用的是vue-router跳转的，如果跳到二级菜单，刷新页面的话会出现404页面。这是因为在vue中使用的是js渲染的虚拟目录，而在nginx配置中并没有实际的资源，所有会出现404。直接上配置：

server {
        listen       80;
        server_name  www.liangyp.xyz;

        location / {
                root  /var/www/VueApp;
                index  index.html index.htm;
                try_files $uri $uri/ @router;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }

                location /apis {
                        rewrite  ^/apis/(.*)$ /$1 break;
                        proxy_pass   http://127.0.0.1:3000/;
       }
}

加上这些后就可以正常访问啦。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有