vue項目打包 部署nginx服務器 訪問遠程接口 本地json 跨域問題

本文建立在你已經在windows7上已經配好了nginx的前提下進行！！！ 如果沒有請移步至：https://www.cnblogs.com/jack1208-rose0203/p/5739765.html

因為編者已經為該項目已經實現了VUE接口統一管理，所以接下來的講解是在這個接口統一管理的環境下進行的

關於VUE接口統一管理，可以參照這里：

參照1：https://www.cnblogs.com/yingyigongzi/p/10863477.html

參照2：https://www.codercto.com/a/53432.html

我的項目，

在開發環境中，關於接口有三個步驟：

1.在config/index.js中設置接口代理

2.在navigationTree.js中設置接口的統一管理 (navigationTree.js怎么來的，請參考我上文說的兩篇參考文章鏈接)

3.在組件中調用這個接口

調用方法

開發這樣設置，就可以解決跨域，並且統一管理接口，能拿到數據了

生產環境

開發結束后就要打包，上線

步驟

1.nginx安裝目錄下的conf/nginx.conf文件進行配置

我把這部分代碼貼出來

server {
        listen       8081;  #前端服務啟動后，訪問用的端口
        server_name  localhost; #訪問前端服務的IP

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

	# 匹配以/nginxGetTreeListForSoilByRegion/開頭的請求
        location ^~ /nginxGetTreeListForSoilByRegion/ {
            proxy_pass  你自己的真實接口地址;
        }

	location / {
            root   D:/peixun/nginx-1.16.0/html/dist;  #前端dist文件夾的絕對路徑
	    index  index.html index.htm;  
        }
#剩下代碼都一樣，略

 2.去VUE項目的config/index.js 里，設置打包上線的接口配置，配合nginx已經設置好的代理接口名(我這里用nginx代理的接口名是nginxGetTreeListForSoilByRegion)

 

3.去navigationTree.js里，把之前開發用的接口配置，也改成打包上線用的配置

以上3步設置好后，在該VUE項目的路徑下，執行cmd的npm run build

將得到的dist文件夾，放入nginx安裝目錄的html文件夾內，即可

 //----------------------------------------------------------------訪問本地json數據時-----------------------------------------------------------------------------------

我們在開發時，將本地json文件放入static文件夾內，打包的時候，該json文件也會自動打包進dist里面的static文件夾內

訪問本地json，只要修改nginx里的conf/nginx.conf文件即可

我把代碼貼出來

 server {
        listen       8081;  #前端服務啟動后，訪問用的端口
        server_name  localhost; #訪問前端服務的IP

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

	# 匹配以/nginxGetTreeListForSoilByRegion/開頭的請求
        location ^~ /nginxGetTreeListForSoilByRegion/ {
	    # 訪問遠程接口數據
	    # proxy_pass   你遠程接口的地址
	    # 訪問本地json  http://localhost:8081 代表着你項目在服務器的地址，我這邊就是D:\peixun\nginx-1.16.0\html\dist，這是在root處設置的
            proxy_pass   http://localhost:8081/static/testData/GetTreeListForSoilByRegion.json;
        }

	location / {
            root   D:/peixun/nginx-1.16.0/html/dist;  #前端dist文件夾的絕對路徑  這個就等同於 http://localhost 至於端口號8081，則是在listen處設置的
	    index  index.html index.htm;  
        }