Nginx部署vue踩坑记录

安装Nginx

官网下载http://nginx.org/en/download.html

默认安装路径

/usr/local/nginx

每次改完配置后执行热启动

# 在/usr/local/nginx/sbin目录下执行
./nginx -s reload

打包vue

npm run build

部署vue

# 将dist中的文件都放在下面目录
/usr/local/nginx/html

踩坑

问题一：加不加 /

详细参考https://www.jianshu.com/p/b010c9302cd0

        # 访问 http://localhost/api/vue/login
        # 后端 http://localhost/vue/login
        location ^~ /api/vue/ {
            proxy_pass http://127.0.0.1/vue/;
            proxy_set_header Host $host:$server_port;
        }

问题二：页面刷新404，关于路由和真实接口地址

详细参考https://my.oschina.net/u/1760791/blog/1575808

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }