項目描述
一個基于vue-cli3 + node 作為后臺服務(wù)器 + mongodb 存儲數(shù)據(jù) 的發(fā)型官網(wǎng).分享一下部署到阿里云Windows服務(wù)器遇到的一些問題
代碼結(jié)構(gòu)
在這里插入圖片描述
偷個懶,用截圖代替
- 除了server目錄和vue.config.js都是vue-cli3自動生成的目錄,這里就不一一解釋
-
server目錄用于存放node服務(wù)端文件,里面包含4個文件,筆者這里沒有再去分類,直接寫在一個文件夾下了.app.js是主文件不需要解釋,email.js是發(fā)送郵件的模塊,mongo.js是生成Schema的模塊,router.js就是各種路由接口
在這里插入圖片描述
部署到服務(wù)器
- 首先
npm run build打包成dist目錄 - 服務(wù)器這里筆者用的是nginx
- 將dist目錄中的內(nèi)容拷貝到nginx中,因為筆者已經(jīng)部署過一個項目,所以這里用新的接口部署網(wǎng)站,下面會有部署方法
- 對于node服務(wù)端,筆者是萌新,不知道該怎么簡便打包運行,如果有大神看到麻煩留言賜教,筆者這里直接將server 拷貝到了nginx下,安裝了node和mongodb環(huán)境運行,具體過程不再描述
- 這時已經(jīng)能通過服務(wù)器公網(wǎng)IP來訪問我們的頁面了
nginx新建接口
- 打開nginx目錄,進入conf目錄下的nginx.conf 配置文件
- 插入如下代碼
server {
listen 8080; //設(shè)置你想使用的接口
server_name localhost;
location / {
root qhxx; //你的項目相對于conf目錄的文件夾目錄地址,這里也就是筆者的dist目錄中的內(nèi)容部署在qhxx這個目錄中
index index.html index.htm; //入口是index.html
error_page 404 /index.html; //這個地方后面會講到
}
location /api/ { //這個地方用于配置服務(wù)器能正確識別node服務(wù),配置以/api開頭都能正確找到下面的pass接口
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header x-Real-IP $remote_addr;
proxy_pass http://47.101.64.244:3000/;
}
}
- 再重新啟動nginx服務(wù)器即可通過端口8080訪問
刷新頁面404問題
- 在我們部署好項目后進入會發(fā)現(xiàn)路由組件部分刷新后會顯示404,這是因為我們在vue-router中使用了history模式,因為history可以去掉默認(rèn)的
/#/,方便我們處理路由,但這同時也會導(dǎo)致頁面刷新顯示404錯誤,這是因為前端路徑發(fā)送給后端后,服務(wù)器不認(rèn)識省去#的url,因此會返回404 - 我們可以在nginx中通過配置來解決這個問題,就是上面的
error_page 404 /index.html,這個配置會幫助我們將無法識別的路徑都渲染成index.html,這樣就能解決history刷新404的問題了 - 當(dāng)然這個解決方法并不完美,想要更完美的解決方案的可以參考這篇文章解決方案
項目地址
如果有興趣的小伙伴可以看我的碼云qhxx
