vue-cli3 + mongodb + express + node跑在服务器上以及刷新页面404解决方案

项目描述

一个基于vue-cli3 + node 作为后台服务器 + mongodb 存储数据 的发型官网.分享一下部署到阿里云Windows服务器遇到的一些问题

代码结构

在这里插入图片描述

偷个懒,用截图代替

• 除了server目录和vue.config.js都是vue-cli3自动生成的目录,这里就不一一解释

• server目录用于存放node服务端文件,里面包含4个文件,笔者这里没有再去分类,直接写在一个文件夹下了.app.js是主文件不需要解释,email.js是发送邮件的模块,mongo.js是生成Schema的模块,router.js就是各种路由接口

  
  
  

  在这里插入图片描述

部署到服务器

• 首先npm run build 打包成dist目录
• 服务器这里笔者用的是nginx
• 将dist目录中的内容拷贝到nginx中,因为笔者已经部署过一个项目,所以这里用新的接口部署网站,下面会有部署方法
• 对于node服务端,笔者是萌新,不知道该怎么简便打包运行,如果有大神看到麻烦留言赐教,笔者这里直接将server 拷贝到了nginx下,安装了node和mongodb环境运行,具体过程不再描述
• 这时已经能通过服务器公网IP来访问我们的页面了

nginx新建接口

• 打开nginx目录,进入conf目录下的nginx.conf 配置文件
• 插入如下代码

server { 
    listen       8080;  //设置你想使用的接口
    server_name  localhost;
    location / {
        root qhxx;  //你的项目相对于conf目录的文件夹目录地址,这里也就是笔者的dist目录中的内容部署在qhxx这个目录中
        index index.html index.htm; //入口是index.html
        error_page 404 /index.html; //这个地方后面会讲到
    }     
    location /api/ {    //这个地方用于配置服务器能正确识别node服务,配置以/api开头都能正确找到下面的pass接口
        proxy_set_header  Host  $host;
        proxy_set_header  x-forwarded-for  $remote_addr;
        proxy_set_header  x-Real-IP  $remote_addr;
        proxy_pass  http://47.101.64.244:3000/;     
    }
 }

• 再重新启动nginx服务器即可通过端口8080访问

刷新页面404问题

• 在我们部署好项目后进入会发现路由组件部分刷新后会显示404,这是因为我们在vue-router中使用了history模式,因为history可以去掉默认的 /#/,方便我们处理路由,但这同时也会导致页面刷新显示404错误,这是因为前端路径发送给后端后,服务器不认识省去#的url,因此会返回404
• 我们可以在nginx中通过配置来解决这个问题,就是上面的 error_page 404 /index.html,这个配置会帮助我们将无法识别的路径都渲染成index.html,这样就能解决history刷新404的问题了
• 当然这个解决方法并不完美,想要更完美的解决方案的可以参考这篇文章解决方案

项目地址

如果有兴趣的小伙伴可以看我的码云qhxx