nuxt項目打包上線,以及nuxt項目基礎代碼分享


更新了另一個打包部署的流程,請看另一篇文章,可以對比一下: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錯誤頁面自定義,打印錯誤信息到頁面上,使得開發過程中調試更加方便,點擊“我的客服”頁面可見
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM