Nginx解決vue專案伺服器部署及跨域存取後端詳解

2022-11-09 14:03:14

準備

（1）首先是一個Vue專案。

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

（3）準備好一個SpringBoot後端程式碼。

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

1、前端程式碼注意事項：

（1）在這裡我是用vuecli3腳手架建立的vue專案的，所以專案建立完畢之後是沒有vue.config.js的。

其實這個檔案的建立是為了本地測試解決前後端跨域問題的，但是在打包專案的時候需要把這裡關於跨域的程式碼需要註釋。

// vue.config.js

module.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路由模式。