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

代理配置完成，两种方式选中一种即可

项目就可以正常访问后端接口