全棧開發:前後端分離配置篇(vue+webpack+mock+nginx+laravel)
是如何使前後端完全分離,答案是在伺服器端利用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伺服器實現介面的轉發,這樣前後端只要在開發前商議好介面,就可以分別開發部署,極大提高開發效率,如果你是一名全棧開發人員,你更需要這種方式