VueCLI3 + Nodejs前后端分离项目部署至Nginx服务器

Vue CLI3 + NodeJS 前后端分离项目部署至Nginx服务器的流程

今天花费了很长一段时间来做这件事，踩了不少坑，网上也很少有这方面的案例，这里我就把我今天的部署流程进行详细的展列，步骤如下：

第一步

解决掉请求域问题，前后端分离，首要想到的是请求域的解决，Vue CIL3的配置文件都隐藏了，这里我们需要在项目的根路径下创建vue.config.js文件，整个文件内容如下：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: { /**配置别名,@在内部已经使用了别名,对应src/文件夹*/
        assets: '@/assets',
        common: '@/common',
        components: '@/components',
        network: '@/network',
        views: '@/views'
      }
    }
  },
  /**上面的都是Vue前台使用别名的配置，不用管***********/

/*********从这里开始是重点！！！！！！！！！！！**********/
  devServer: {
    /**处理前后端分离跨域问题*/
    proxy: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {// 代理的虚拟目录
        target: 'http://127.0.0.1:3001',//请求后台Node项目的url
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': ''//由于上面的虚拟目录实际上是不存在的，不去掉的话访问的时候显示的url会变成'http://localhost:3000/api'，所以得去掉
        }
      }
    }
  }
}

同时axios(这里我使用的是axios发送网络请求的)要使用上面的配置，通过：

axios.create({ //创建axios实例
    baseURL: '/api',
    // timeout: 40000, // 最多超时多久
    // ... axios具体配置由自己来决定，但是一定要让发送请求的axios实例与上面的 《代理虚拟目录》产生关系(即要使用到它)
    
})

前台路由(router)的配置，其实这一步是多余的，根本不用看这一步，当然你也可以来看看：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL, // 本地测试使用该路由配置
  // base: '/sale_puma/', // 网上好多教程都是让改成这个，但是我试了，这个和上面的都可以，没有任何影响
  routes
})
export default router

将Vue项目进行打包，得到打包生成的dist/目录；
Vue前台的配置到此就结束了
后台的Node项目压根就没有配置过

第二步

将项目发送至服务器，我是用WinSCP工具将Vue前台项目和Node后台项目发送至服务器，我们先把node项目跑起来，使用pm2将node项目在后台以守护进程的形式启动，pm2特别好安装，随便搜一下就出来了，先安装好pm2，再进入Node项目的根路径下使用命令pm2 start app.js命令启动Node项目，我的Node项目使用是express框架，

第三步

开始重头戏，配置Nginx，首先保证有Nginx环境，安装还请各位自行百度(这个博客主要是讲项目部署的)，我们将第一步打包的Vue项目的dist/目录的内容放到一个指定的地方，如下图：


打开Nginx配置文件(Nginx的安装目录下的conf/目录)

添加server标签，如下：

server {
        listen 4001;  # 监听的端口，就客户端访问的端口
        location / {
            root /usr/local/nginx/my_html/sale_puma; # 对应Vue打包项目的目录路径
            index index.html index.htm; # 默认响应页面
            try_files $uri $uri/ @router; # 引用定义的@router路由(保证Vue的前台路由再Nginx下不失效)
        }
        location @router { # 这个标签就是来保证Vue前台路由不失效的
            rewrite ^.*$ /index.html last; # 我也不太清楚，照着写吧，官方文档下的
        }
        location /api/ { // 这个要和第一步的跨域请求配置的proxy标签有关，但是注意第一步是  /api  ， 这里是  /api/ 
        	// 下面这些都照着写
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            // 下面对应的是Node项目的请求地址(就是第二步的接口地址)
            proxy_pass http://150.158.212.186:3001/;
        }
    }

Nginx是开的(重启Nginx)，再nginx安装目录下的 sbin/目录使用命令 ./nginx reload，使上面配置的Nginx文件生效；
**至此，配置全部完成，**此时我们访问该端口测试：http://tyong-top.design:4001；
如下：


最后，也欢迎各位看官来访问我部署的项目(http://tyong-top.design:4001)，非常感谢！如果您还有什么疑惑，请留言告知，我会尽最大努力为您解决！