vue項目打包后部署到nginx服務器

此方法實在windows環境下運行的

安裝完nginx后進入D:\nginx\conf

修改nginx.conf配置文件

第一步：配置根目錄

location / {
            root   D:\code\base-platform-vue\dist;#項目打包后的目錄地址
            index  index.html index.htm;
            try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
        }
        #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的文件
        #因此需要rewrite到index.html中，然后交給路由在處理請求資源
        location @router {
            rewrite ^.*$ /index.html last;
        }

第二步：配置跨域代理

location ~ ^/api/ {
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://0.1.2.3:8000;
		}

　　vue代碼中的跨域配置如下：

proxyTable: {
      '/api': { //使用"/api"來代替"http://47.93.225.94:8000"
        target: 'http://0.1.2.3:8000', //源地址
        changeOrigin: true, //改變源
        pathRewrite: {
          '^/api': '/' //路徑重寫
        }
      }
}

　　vue發送請求的代碼如下：

var url = '/api/v1/api/rootindrs';
axios.get(url,{}).then(function(data){

})

　　post請求也是一樣的

配置完成后項目就可以起飛了