更新了另一個打包部署的流程,請看另一篇文章,可以對比一下:https://www.cnblogs.com/daisygogogo/p/11304421.html
nuxt的項目部署到線上環境,有多種方法,這里分享我使用的方法,一步步照着配置,就可以配置成功~
(1)項目先執行npm run build 打包好
(2)服務器安裝node 和pm2依賴
服務器:切換到希望安裝這兩個依賴的目錄下,依賴可以用於多個node項目,這里我新建了node_project文件夾
安裝 node:
第二步解壓:xz -d node-v10.16.0-linux-x64.tar.xz tar -xvf node-v10.16.0-linux-x64.tar
第三步重命名:mv node-v10.16.0-linux-x64 node
第四步修改環境變量:vi ~/.bash_profile
PATH=$PATH:$HOME/bin // 修改前 PATH=$PATH:$HOME/bin:/usr/local/src/node/bin // 修改后
改好之后保存退出
第五步編譯剛剛修改的文件:source ~/.bash_profile
安裝pm2
npm i -g pm2
上傳打包后的文件到node_project /web-pc,其中web-pc是我們的項目名稱,一共有四個文件需要傳
(3)啟動項目
1. 切換到項目目錄 cd web-pc
2.執行 npm install -production 安裝依賴(依賴有變更或者未安裝過)
3.使用pm2 啟動項目: pm2 start npm --name "web-pc" -- run start
4.啟動成功沒有問題的話,可以設置開機啟動項目
pm2 save #保存當前開機啟動列表
pm2 startup #設置開機啟動
完成
pm2的一些常用命令
$ pm2 stop all # 停止所有的應用程序
$ pm2 stop 0 # 停止 id為 0的指定應用程序
$ pm2 restart all # 重啟所有應用
$ pm2 reload all # 重啟 cluster mode下的所有應用
$ pm2 delete all # 關閉並刪除所有應用
$ pm2 delete 0 # 刪除指定應用 id 0
最后分享一下經過簡單基礎化配置過后的項目代碼,
覺得有用不妨給個star或者贊哦~
主要配置有:
- element-ui引入
- axios.js 插件引入(初始化項目的時候也可以選擇),根據當前環境,設置defaultURL
- 配置proxy代理
- scss使用
- middleware中間件鑒權,嘗試過在nuxt項目中使用路由守衛,但是不成功,需要使用自帶的middleware中間件
- 詳情頁面展示,nuxt的動態路由頁面,跟普通vue頁面有點不一樣,需要新建文件夾包裹,詳見pages下的shopDetail頁面
- error錯誤頁面自定義,打印錯誤信息到頁面上,使得開發過程中調試更加方便,點擊“我的客服”頁面可見
