Nginx解決vue項目服務器部署及跨域訪問后端詳解

目錄

• 準備
• 1、前端代碼注意事項：
• 2、虛擬機的Nginx配置關鍵點：
• 測試
• 總結

準備

（1）首先是一個Vue項目。

（2）其次準備好服務器（在這里我是用虛擬機VMware）。

（3）準備好一個SpringBoot后端代碼。

（4）服務器上必須安裝Nginx。

1、前端代碼注意事項：

（1）在這里我是用vuecli3腳手架創建的vue項目的，所以項目創建完畢之后是沒有vue.config.js的。

其實這個文件的創建是為了本地測試解決前后端跨域問題的，但是在打包項目的時候需要把這里關于跨域的代碼需要注釋。

// vue.config.jsmodule.exports = {    publicPath: "./",    runtimeCompiler: true,    // devServer:{    //     port:83,    //     proxy:{    // "/api":{    //     target:"http://localhost:8086",    //     changOrigin: true,  //允許跨域    //     pathRewrite:{    // "^/api":""  //重寫路徑    //     }    // }    //     }    // }}

（2）第二點前端配置的請求路徑需要加一個前綴，用于nginx的路由轉發：

import axios from "axios";const request = axios.create({    // baseURL: "http://localhost:8086",  //  注意!!  這里是全局統一加上了  "/api"  前綴,也就是說所有的接口都會加上"/api"前綴名    // timeout: 5000    //利用nignx解決跨域問題    baseURL: "/api",  //  注意!!  這里是全局統一加上了  "/api"  前綴,也就是說所有的接口都會加上"/api"前綴名    timeout: 5000})export default request;

（3）第三點需要改一下路徑地址，配置路由和組件之間的關系，配置成Hash路由模式。

（4）基本上到這里然后控制臺npm run build 一下就可以了??！

（5）將dist文件夾的文件上傳到Nginx中。

2、虛擬機的Nginx配置關鍵點：

重要的一點，全程都要以root賬戶進行操作，輸入su root ，然后輸入密碼即可進行root權限。

（1）Nginx結構目錄：

（2）在這里我們要把前端打包好的代碼dist下面的文件通過第三方軟件上傳到了index中了。

（3）這時候開始配置cong中的nginx.conf文件，vim nginx.conf。

(4)修改配置文件：具體如圖所示，在這里注意proxy_pass http://之后的地址加你自己電腦的IP地址加上相應的后端的端口號。

舉個例子：假設這里我本機的IP地址為192.168.12.1，SpringBoot的端口號為8081，那么請求地址為proxy_pass http://192.168.12.1:8081/;

如何查看本機的Ip地址呢？找到window10左下角輸入cmd，然后輸入ipconfig，就可以查看了。

（5）還有很重要的一點，要關閉Linux的防火墻，我這里是centos7.6，所以在命令行要輸入systemctl stop firewalld.service。

到這里的話，把后端的項目跑起來，虛擬機上的Nginx運行起來，項目就可以正常訪問了?。?！

測試

（1）訪問服務器中的前端文件

（2）前端文件請求，然后通過Nginx轉發到后端。

（3）后端接受請求，給予前端反饋。

總結

到此這篇關于Nginx解決vue項目服務器部署及跨域訪問后端的文章就介紹到這了,更多相關Nginx解決vue項目服務器部署內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！