乙個vue go echo前後端分離的專案的上線

這是乙個web前後端分離專案的上線過程。解決了跨域問題~

前端用的axios,一定會遇到跨域的問題。這裡先說一下axios的乙個坑，傳送post請求的時候,如果不是發json資料,一定要先設定一下:

複製**

新增引數為:

var params = new urlsearchparams();
axios().then(...)
複製**

還有一點，最好不要在url這個欄位上直接寫:，這樣有乙個壞處，如果佈署到生產環境（線上伺服器），比如是111.111.111.111goweb服務埠是:1222,最後請求的位址不會是你想的111.111.111.111:1222,而是127.0.0.1:1222,自然是不行的。

開發環境的伺服器大多數情況和生產環境的不一致，接上面的部分，url寫成/login。我先說一下開發環境理想的情況吧。

axios 請求/login前端自動**成:127.0.0.1:1222/login但是實際中，怕login與vue-router中的login有衝突,也有可能有人直接ajax，所以可以在url:login前加/api, 現在的步驟是這樣的：

axios請求/login請求變成api/login請求被處理成127.0.0.1:1222/login

只要把3中的127.0.0.1:1222/login換成111.111.111.111:1222/login就是正式的生產環境啊！

在main.js中這麼寫

const ispro = object.is(process.env.node_env, 'production')
const url= ispro ? '' : 'api/'
axios.defaults.baseurl = url;
複製**

注： build產生的dist**即是生產環境下的** 上面**的作用是:

vue.config.js這麼寫(在根目錄下新建)~

module.exports = },}
}}複製**

上面**的作用是，將/api/***的請求換成localhost:1222/***

後端沒有前端那麼麻煩echo裡有實現的跨域中介軟體，直接上就ok

e.use(middleware.cors())
複製**

然後go的佈署是真的要吹一波，在winodws下直接可以編譯出linux的**，在main.go所在的目錄下直接開啟命令列輸入:

set goos=linux
set gopach=amd64
go build 
複製**

當然liux直接go build main.go會出現乙個專案名無字尾的檔案。比如我的是xin (趙信信爺的意思) 直接在linux下 ./xin 就可執行。但是在伺服器中，還是要後台執行nohup ./xin &後端就結束了

檢視要用的埠有沒有被使用：lsof -i:埠號

用xftp把vue生成的dist資料夾下的檔案上傳到指定的位址，然後簡單的配置一下就可以跑了

server 
}複製**