node-vue項目打包上線-注意事項

以下配置基於linux寶塔面板配置

後臺api接口部署線上 

上傳接口代碼

創建數據庫

代碼調整 動態適配線上和線下不同環境

用字符串'production'來代表線上, 'development'來代表線下, 這樣自適應判斷, 我們不必再頻繁來回改動一些配置代碼

package.json調整

本地環境執行命令npm run start, 啓動本地服務, 所以在package.json中修改如下這行, 設置NODE_ENV的值爲development

{
  "name": "project3",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "set NODE_ENV=development && node  ./bin/www ",
	"dev": "nodemon ./bin/www"
},

根目錄添加pm2.json

線上環境, 執行時, 使用pm2.json爲啓動文件, 也設置env.NODE_ENV的值爲'production'

{
  "apps" : [{
    "name"        : "dyh-U-api",    //項目ming
    "script"      : "./bin/www",    //啓動文件
    "args"        : ["-p", "3000"], 
    "node_args"   : "--harmony",    
    "merge_logs"  : true,        
    "cwd":"./",
    "env": {                  
      "NODE_ENV": "production",
      "PORT": 3000
    }
  }]
}

連接數據庫代碼調整

/** -------------數據庫變更需要修改的地方----------- */
const pStr = process.env.NODE_ENV; // 線上環境值是prduction, 
// 數據庫連接參數
exports.dbConfig = {
    host: 'localhost', 
    user: pStr === 'production' ? "dyh" : 'root',
    password: pStr === 'production' ? '!QAZ2wsx' : 'root',
    port: 3306,
    database: 'shop_db' // 數據庫名字
}

啓動接口項目 

如果添加上了, 但是現實OFF, 證明線上的後端node代碼報錯了.
打開xsheel, 執行命令 pm2 log , 查看node啓動時終端打印的錯誤消息
如果沒問題, 顯示的是端口號

訪問線上接口

接口服務部署完成

部署前端項目

項目打包

上傳到服務器上

使用nginx上線項目

由於項目和api接口所屬端口不同，跨域了

需要配置代理轉發，才能正常使用api

代理配置完成，兩種方式選中一種即可

項目就可以正常訪問後端接口