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;
        }