Nginx解決vue項(xiàng)目服務(wù)器部署及跨域訪問后端詳解
準(zhǔn)備
（1）首先是一個(gè)Vue項(xiàng)目。
（2）其次準(zhǔn)備好服務(wù)器（在這里我是用虛擬機(jī)VMware）。
（3）準(zhǔn)備好一個(gè)SpringBoot后端代碼。
（4）服務(wù)器上必須安裝Nginx。
1、前端代碼注意事項(xiàng)：
（1）在這里我是用vuecli3腳手架創(chuàng)建的vue項(xiàng)目的，所以項(xiàng)目創(chuàng)建完畢之后是沒有vue.config.js的。
其實(shí)這個(gè)文件的創(chuàng)建是為了本地測試解決前后端跨域問題的，但是在打包項(xiàng)目的時(shí)候需要把這里關(guān)于跨域的代碼需要注釋。
// vue.config.js
module.exports = {
publicPath: './',
runtimeCompiler: true,
// devServer:{
// port:83,
// proxy:{
// '/api':{
// target:"http://localhost:8086",
// changOrigin: true, //允許跨域
// pathRewrite:{
// '^/api':'' //重寫路徑
// }
// }
// }
// }
}
（2）第二點(diǎn)前端配置的請求路徑需要加一個(gè)前綴，用于nginx的路由轉(zhuǎn)發(fā)：
import axios from "axios";
const request = axios.create({
// baseURL: 'http://localhost:8086', // 注意!! 這里是全局統(tǒng)一加上了 '/api' 前綴,也就是說所有的接口都會加上'/api'前綴名
// timeout: 5000
//利用nignx解決跨域問題
baseURL: '/api', // 注意!! 這里是全局統(tǒng)一加上了 '/api' 前綴,也就是說所有的接口都會加上'/api'前綴名
timeout: 5000
})
export default request;（3）第三點(diǎn)需要改一下路徑地址，配置路由和組件之間的關(guān)系，配置成Hash路由模式。
（4）基本上到這里然后控制臺npm run build 一下就可以了?。?/strong>
（5）將dist文件夾的文件上傳到Nginx中。
2、虛擬機(jī)的Nginx配置關(guān)鍵點(diǎn)：
重要的一點(diǎn)，全程都要以root賬戶進(jìn)行操作，輸入su root ，然后輸入密碼即可進(jìn)行root權(quán)限。
（1）Nginx結(jié)構(gòu)目錄：
（2）在這里我們要把前端打包好的代碼dist下面的文件通過第三方軟件上傳到了index中了。
（3）這時(shí)候開始配置cong中的nginx.conf文件，vim nginx.conf。
(4)修改配置文件：具體如圖所示，在這里注意proxy_pass http://之后的地址加你自己電腦的IP地址加上相應(yīng)的后端的端口號。
舉個(gè)例子：假設(shè)這里我本機(jī)的IP地址為192.168.12.1，SpringBoot的端口號為8081，那么請求地址為proxy_pass http://192.168.12.1:8081/;
如何查看本機(jī)的Ip地址呢？找到window10左下角輸入cmd，然后輸入ipconfig，就可以查看了。
（5）還有很重要的一點(diǎn)，要關(guān)閉Linux的防火墻，我這里是centos7.6，所以在命令行要輸入systemctl stop firewalld.service。
到這里的話，把后端的項(xiàng)目跑起來，虛擬機(jī)上的Nginx運(yùn)行起來，項(xiàng)目就可以正常訪問了！?。?/strong>
測試
（1）訪問服務(wù)器中的前端文件
（2）前端文件請求，然后通過Nginx轉(zhuǎn)發(fā)到后端。
（3）后端接受請求，給予前端反饋。
總結(jié)
到此這篇關(guān)于Nginx解決vue項(xiàng)目服務(wù)器部署及跨域訪問后端的文章就介紹到這了,更多相關(guān)Nginx解決vue項(xiàng)目服務(wù)器部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
隱藏網(wǎng)站nginx服務(wù)的版本號信息，在安全的角度上來說，可以防止黑客快速利用nginx的版本漏洞進(jìn)行攻擊，所以本文為大家整理了隱藏網(wǎng)站Nginx版本號信息的方法，希望對大家有所幫助2023-08-08
大家好，本篇文章主要講的是nginx安裝完成無法解析php解決方法，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
本篇文章給大家圖文詳細(xì)講解了Nginx搭建圖片服務(wù)器的過程以及中間遇到的問題處理方法，一起跟著小編學(xué)習(xí)下吧。2017-12-12
nginx是一款高性能的web服務(wù)器，常用于負(fù)載均衡和反向代理，本文主要介紹了nginx作grpc的反向代理踩坑總結(jié)，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了Windows中將Nginx添加為服務(wù)的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
這篇文章主要介紹了Nginx端口映射配置方法和多端口映射，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Nginx常用技巧使用實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
Nginx?403?forbidden錯(cuò)誤的原因以及解決方法
yum安裝nginx,安裝一切正常,但是訪問時(shí)報(bào)403 forbidden,下面這篇文章主要給大家介紹了關(guān)于Nginx?403?forbidden錯(cuò)誤的原因以及解決方法,需要的朋友可以參考下2022-08-08
OpenResty是一個(gè)基于?Nginx?與?Lua?的高性能?Web?平臺,其內(nèi)部集成了大量精良的?Lua?庫、第三方模塊以及大多數(shù)的依賴項(xiàng),這篇文章主要介紹了高性能軟件負(fù)載OpenResty介紹和安裝,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了nginx反向代理的全流程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12