幾日之后,開始部署 生產(chǎn)環(huán)境, 有興趣的同學(xué)可以先看一下laravel + Vue 前后端分離 項(xiàng)目配置 開發(fā)環(huán)境,好了,廢話少說,開始總結(jié)

部署過程中的問題：https://blog.csdn.net/qq_22227087/article/details/82527526

說明: 項(xiàng)目配置: 主網(wǎng)站 www.a.com 接口域名 api.a.com

第一步: vue-cli開發(fā)環(huán)境中配置代理服務(wù)

原:

const DEVHOST = 'http://api.a.com/api/'; module.exports = {'/': {target: DEVHOST,changeOrigin: true,pathRewrite: {'^/': ''}}, } 項(xiàng)目中調(diào)用接口this.$http.get('/blogs/blists')... 即請求地址: http://api.a.com/api/blogs/blists

開發(fā)過程中使用順利,美滋滋,但是在部署到生產(chǎn)環(huán)境中之后,報api接口404, 著實(shí)讓人難受,結(jié)果一番搜索吧,終于找到了解決辦法.

改

const DEVHOST = 'http://api.a.com/'; # 去掉api/ module.exports = {'/': {target: DEVHOST,changeOrigin: true,pathRewrite: {'^/': ''}}, }項(xiàng)目中調(diào)用接口this.$http.get('/api/blogs/blists')... # 在每一個請求上添加 /api/xxxx 即請求地址: http://api.a.com/api/blogs/blists

第二步: 改代理服務(wù)地址(反向代理)
由于我使用的是Apache服務(wù)器,所以主要以Apache說明,請領(lǐng)會意思,舉一反三

首先, 開啟代理()

# 配置文件地址 : /usr/local/apache/conf/httpd.conf //去調(diào)下面?zhèn)z行的注釋（＃） #LoadModule proxy_module modules/mod_proxy.so #LoadModule proxy_http_module modules/mod_proxy_http.so

兩種方式

使用 域名 配置

# 配置文件地址: /usr/local/apache/conf/extra/httpd-vhosts.conf # vue # www.a.com 地址配置 <VirtualHost *:80>ServerName www.a.comDocumentRoot /data/www/default/blog/www.a.com/dist<Directory "/data/www/default/blog/www.a.com/dist">Options +Indexes +Includes +FollowSymLinks +MultiViewsAllowOverride AllRequire all granted</Directory># 反向代理# ProxyRequests On # 開啟正向代理ProxyRequests Off # 開啟反向代理# ProxyPass /api http://api.a.com/# ProxyPassReverse /api http://api.a.com/ProxyPassMatch ^/api http://api.a.com/ </VirtualHost>ProxyRequests Off 指令是指開啟反向代理，對于客戶端來說，他就是原始服務(wù)器，并且客戶端不用進(jìn)行特別的設(shè)置；而正向代理允許客戶端通過它訪問任何服務(wù)并隱藏客戶端自身，因此必須采取一些安全措施確保只為授權(quán)的服務(wù)器提供服務(wù)； ProxyPass 將一個遠(yuǎn)端服務(wù)器映射到本地服務(wù)器的URL空間中； ProxyPassReverse 調(diào)整由反向代理服務(wù)器發(fā)送的HTTP回應(yīng)頭中的URL；# laravel # api.a.com 配置 <VirtualHost *:80>ServerName api.a.comDocumentRoot /data/www/default/blog/api.a.com/public<Directory "/data/www/default/blog/api.a.com/public">Options +Indexes +Includes +FollowSymLinks +MultiViewsAllowOverride AllRequire all granted</Directory> </VirtualHost>

或

使用 端口 配置

# vue # www.a.com 地址配置 # 端口: 8081 <VirtualHost 127.0.0.1:8081>DocumentRoot /data/www/default/blog/www.a.com/dist<Directory "/data/www/default/blog/www.a.com/dist">Options +Indexes +Includes +FollowSymLinks +MultiViewsAllowOverride AllRequire all granted</Directory># 反向代理ProxyPreserveHost Off ProxyPass /api http://127.0.0.1:8082/ProxyPassReverse /api http://127.0.0.1:8082/ </VirtualHost># laravel # api.a.com 配置 # 端口: 8082 <VirtualHost 127.0.0.1:8082>DocumentRoot /data/www/default/blog/api.a.com/public<Directory "/data/www/default/blog/api.a.com/public">Options +Indexes +Includes +FollowSymLinks +MultiViewsAllowOverride AllRequire all granted</Directory> </VirtualHost>

部署過程中的問題：https://blog.csdn.net/qq_22227087/article/details/82527526

到此就OK了,

參考鏈接:
Nginx 配置: http://vue_book.siwei.me/nginx_fix_cross_domain_problem.html
apache代理轉(zhuǎn)發(fā)配置: https://blog.csdn.net/m0sh1/article/details/78621270

---

---

使用正向代理時嚴(yán)格控制訪問權(quán)限(使用ProxyRequests指令)是非常重要的。否則你的代理會被客戶端利用來訪問其它服務(wù)器并且隱藏客戶端的真實(shí)身份。這不僅對您的網(wǎng)絡(luò)有威脅，對整個因特網(wǎng)來說也同樣如此。當(dāng)使用反向代理(在"ProxyRequests Off"條件下使用ProxyPass指令)的時候訪問控制要相對寬松，因?yàn)榭蛻舳酥荒苓B接你配置的特定主機(jī)。

總結(jié)

以上是生活随笔為你收集整理的laravel + Vue 前后端分离 之 项目配置- 生产环境部署的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。