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

更新了另外一個打包部署的流程，請看另外一篇文章，能夠對比一下：https://www.cnblogs.com/daisygogogo/p/11304421.html

nuxt的項目部署到線上環境，有多種方法，這裏分享我使用的方法，一步步照着配置，就能夠配置成功~

 

（1）項目先執行npm run build 打包好

 

（2）服務器安裝node 和pm2依賴

服務器：切換到但願安裝這兩個依賴的目錄下，依賴能夠用於多個node項目，這裏我新建了node_project文件夾

安裝 node:

第一步下載： curl -O https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

第二步解壓：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

 

最後分享一下通過簡單基礎化配置事後的項目代碼，

請戳github：https://github.com/daisygogogo/nuxt-element-ui-pc-website

以爲有用不妨給個star或者贊哦~

 

主要配置有：

• element-ui引入
• axios.js 插件引入（初始化項目的時候也能夠選擇），根據當前環境，設置defaultURL
• 配置proxy代理
• scss使用
• middleware中間件鑑權，嘗試過在nuxt項目中使用路由守衛，可是不成功，須要使用自帶的middleware中間件
• 詳情頁面展現，nuxt的動態路由頁面，跟普通vue頁面有點不同，須要新建文件夾包裹，詳見pages下的shopDetail頁面
• error錯誤頁面自定義，打印錯誤信息到頁面上，使得開發過程當中調試更加方便，點擊「個人客服」頁面可見

 

 

原文出處：https://www.cnblogs.com/daisygogogo/p/11218809.html