是如何使前後端完全分離，答案是在伺服器端利用nginx做轉發，前端檔案單獨部署到伺服器某目錄下，nginx負責提供入口和介面監聽，也就是前後端分離成兩個專案部署到伺服器上，好處是前端人員可以自行運維前端專案，後端人員只需要提供api介面即可，互不干擾。其實這種方案老早之前就已經被使用過了，由於入行時間不長，我在這裡只是記錄下自己研究的一些心得，歡迎批評指正。

下面說一下具體玩法，前端使用vue-cli搭建專案，webpack打包，在後端介面未完成情況下用mock模擬假資料，使用nginx轉發介面，後端使用spring框架。

本地開發：

三種情況：

1、後端介面未完成，前端使用mock模擬資料（mock玩法請baidu）

2、後端介面可用，使用webpack-dev-server來啟動專案

配置config/index.js 的 proxyTable引數實現轉發，例：訪問http://localhost:8080/api/login，請求會發送到http://localhost:9090/api/admin/login

dev: {
    env: require('./dev.env'),
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:9090/api/admin/',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
        }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
}
 

3、後端介面可用，不使用webpack-dev-server來啟動專案

配置conf/nginx.conf檔案。listen：前端專案埠號，server_name：前端專案伺服器名，location.root：npm run build到的dist資料夾，location.index：入口檔案，location 路徑名，proxy_pass：轉發到的地址，例：本地訪問http://localhost:8080/api/login，會轉發到http://localhost:9090/api/admin/login（此處可設定成線上路徑，即可以使用線上資料進行開發）

server {
        listen       8081;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   F:\.../vue-admin/dist;
            index  index.html;
        }
	location ^~/api/ {
	    proxy_pass   http://localhost:9090/api/admin/;
	}
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
}
 

結語：通過一些簡單的配置，可以使前後端分離開發，分別部署（伺服器按上面配置好nginx.conf，npm run biuld出的dist檔案傳至伺服器即可達到前後端單獨部署）。前端人員在開發時，如果後端介面沒有完成，可以先使用mock模擬介面資料，如果後端已經提供正確介面資料，使用vue-cli內建的代理或者本地架nginx伺服器實現介面的轉發，這樣前後端只要在開發前商議好介面，就可以分別開發部署，極大提高開發效率，如果你是一名全棧開發人員，你更需要這種方式