项目描述
一个基于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
