Vue2+Node.js前后端分离项目部署到云服务器

本文参考教程： 

NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上，以及本人在部署过程中所遇到的问题、坑点和解决办法，可以说是全网最全最详细的教程了。同时讲解了如何申请阿里云免费SSL证书，以及一台ECS服务器配置多网站的Nginx…https://zhuanlan.zhihu.com/p/45459921 阿里云部署node.js_哔哩哔哩_bilibili阿里云服务器配置https://www.yuque.com/chengbenchao/dc6x4r/nwhfqk, 视频播放量 5159、弹幕量 0、点赞数 73、投硬币枚数 52、收藏人数 285、转发人数 17, 视频作者 超超哥8866, 作者简介 ，相关视频：Vue + Node.js 300行代码实现自动化部署工具，JavaScript Node.js环境连接MySQL，如何安装配置Node.js并使用NVM实现多版本共存和无缝切换（Linux/Windows），阿里云部署mysql服务器，阿里云服务器环境部署apache-tomcat mysql 小白必看 全流程，node.js 到底是什么鬼？，Node.js中的ORM框架Prisma使用，地表最强 node.js，阿里云配置node环境，Node.js安装及环境变量配置https://www.bilibili.com/video/BV1my4y1a7xN?p=1&vd_source=e3ef940eb6c895ae8e05433a9ad26c2a

[第四章]NodeJs+VueJs全栈开发王者荣耀官网(Express+ElementUI)_哔哩哔哩_bilibiliQQ2群 839167184，微信加小姐姐732500779拉群Git 源码: https://github.com/wxs77577/node-vue-moba，代码都在各个分支里，持续更新中，欢迎 star；编辑器 vscode，主题 material theme，字体mononoki；请先安装 nodejs 10+ ，mongodb server，nodemon，vue cli 3https://www.bilibili.com/video/BV18t411L7Lg?p=4&spm_id_from=333.1007.top_right_bar_window_history.content.click[第五章]NodeJs+VueJs全栈开发王者荣耀官网(Express+ElementUI)_哔哩哔哩_bilibili免费不易，淘宝同名店铺《全栈之巅》求关注QQ2群 839167184，微信加小姐姐732500779拉群Git 源码: https://github.com/wxs77577/node-vue-moba，代码都在各个分支；编辑器 vscode，主题 material theme，字体mononoki；请先安装 nodejs 10+ ，mongodb server，nodemon，vue cli 3https://www.bilibili.com/video/BV17t411N7kQ?spm_id_from=333.1007.top_right_bar_window_history.content.click

一、Vue2项目的生产环境编译

1. 把 Vue2 项目编译到 Node.js项目 中的某个静态文件夹中，使其可以被访问到

（1）把 Vue2项目 的后端数据请求接口地址改为 环境变量 形式

• 在 Vue2项目 的 /src/http.js 中修改接口地址：

// /src/http.js

//后端数据请求接口
const http = axios.create({
    // process.env表示环境变量，变量必须以VUE_APP_开头后面跟名字
    baseURL: process.env.VUE_APP_MOBA_API_URL || '/admin/api',
    //baseURL: 'http://localhost:3000/admin/api',
})

• 在 Vue2项目 根目录下，新建 .env.development 文件，存放开发环境中用到的vue的变量：

VUE_APP_MOBA_API_URL=http://localhost:3000/admin/api

• 在 Vue2项目 根目录下，打开 vue.config.js 文件，并在 module.exports 中添加如下代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // ......不重要的代码省略了
  // 编译生成的文件输出到哪个文件夹，其实默认就为dist，这里配置一下如果你别有需要的话可以更改
  outputDir:__dirname+'/dist',
  // 添加如下一行代码：生成的静态文件路径前缀，该前缀应与以后访问Vue2项目时的路径前缀相同
  publicPath:process.env.NODE_ENV==='production'?'/admin/':'/'
})

（2）在 Vue2项目 根目录下打开终端，运行如下命令，编译该 Vue2项目（生成的文件默认存放在 Vue2项目根目录中的 dist 文件夹 中）：

npm run build