vue2 + koa2全栈部署
1.首先打包前端上传
修改config下的index.js 代理地址为服务器IP
2.打包所有后端代码上传服务器
3.配置在linux下的环境:
(1) 安装node, npm, nvm, pm2, mysql, nginx
(2) 先安装,nvm,即是Node Version Manager(Node版本管理器)
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
或者使用 wget
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
之后需要激活nvm:
$ source ~/.nvm/nvm.sh
激活完成后,安装node
nvm install node
安装完成后,切换到该版本
nvm use node
(3)安装pm2
(4)安装mysql https://www.cnblogs.com/dingjiaoyang/p/5110546.html 导入数据库先把数据库从本地导出,然后上传到linux上莫个地方然后导入
(5)安装nginx https://www.cnblogs.com/lauren1003/p/5985206.html or 检查端口是否被占用 netstat -apn | grep 80 whereis httpd cd /etc/httpd/ ll cd conf ll -al vim httpd.conf curl http://127.0.0.1:8000/realtimedata IP是否OK /改反向代理
<VirtualHost *:80>
ProxyPass /realtimedata http://127.0.0.1:8000/realtimedata
# vvkoa 接口反向代理
ProxyPass /vvkoa-api http://127.0.0.1:8889
</VirtualHost>
如何查看Apache安装路径:
①tarball等安装:
whereishttpd //查看httpd的位置,或者可以用whichhttpd查看。
②rpm包形式
rpm-aq|grephttp //查看是否安装了apache包,若已安装,则会打印出包名
rpm-qi输入获取到的包名 //查看该apache包信息
rpm-ql输入包名 //查看apache包中所有文件的安装位置
https://jingyan.baidu.com/article/ac6a9a5e34ab732b653eac8e.html
一、问题描述
react单页应用使用了BrowserRouter 路由(HTML5 history API ),项目打包后,使用apache服务器访问http://www.ceshi.com/userinfo,能够正常显示,但是刷新后页面404了
二、问题原因
刷新页面时访问的资源在服务端找不到,因为react-router设置的路径不是真实存在的路径。
如上的404现象,是因为在apache配置的根目录下面压根没有userinfo这个真实资源存在,这些访问资源都是在js里渲染的。
三、解决方案
1:进入apache目录的conf目录
2:打开httpd.conf
3:找到#LoadModule rewrite_module modules/mod_rewrite.so然后把前面的#去掉
4:找到所有的AllowOverride配置项,把所有的None都修改为All
5:在网站根目录下面新建一个 .htaccess 文件(什么?这个文件不会添加?先新建一个txt,然后另存为 .htaccess文件就行),输入一下内容
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
6:重启apache
vue2 + koa2全栈部署的更多相关文章
- Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)
1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa- ...
- 一款基于SSM框架技术的全栈Java web项目(已部署可直接体验)
概述 此项目基于SSM框架技术的Java Web项目,是全栈项目,涉及前端.后端.插件.上线部署等各个板块,项目所有的代码都是自己编码所得,每一步.部分都有清晰的注释,完全不用担心代码混乱,可以轻松. ...
- Express+Mongoose(MongoDB)+Vue2全栈微信商城项目全记录(二)
用mogoose搭建restful测试接口 接着上一篇(Express+Mongoose(MongoDB)+Vue2全栈微信商城项目全记录(一))记录,今天单独搭建一个restful测试接口,和项目前 ...
- vue3+node全栈项目部署到云服务器
一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和 ...
- web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)
web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2) 主要技术 前端 vue 全家桶 ElementUI 后端 Node.js Koa2 Mongoess 数据库 mong ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...
- vuejs、eggjs全栈式开发设备管理系统
vuejs.eggjs全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展现,包含设备参数分析.发送设备报警等模块.收获还是 ...
- 一个 Vue & Node 的全栈小项目
约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...
随机推荐
- python简介与安装
Python简介和环境搭建 于 20世纪80年代末,Guido van Rossum发明了Python,初衷据说是为了打发圣诞节的无趣.1991年首次发布,是ABC语言的继承,同时也是一种脚本语言.取 ...
- extern const 不能一起用
转载至:https://www.cnblogs.com/herenzhiming/articles/5442893.html 常变量在定义的时候必须初始化,所以当你在a.cpp中定义extern co ...
- Flutter BottomNavigationBar切换会刷新当前页面解决方
问题描述 BottomNavigationBar 是flutter 中最常用的UI组建,刚接触时发现在切换tab 的时候,会刷新当前的所有状态,每个页面都会重新刷新.于是乎,在这里先记录下解决方案. ...
- 关于python merge后数据行数增加的问题
其中一个可能的原因是 join 的 data 里面的列不唯一,也就是要匹配的表里面有些一行数据对应了被匹配表多条数据,这样出来可能会增加行数,可以再查一下被匹配表里的数据是否去重
- 论文学习02-《On the Effectiveness of Visible Watermarks》
I. Estimating the Matted Watermark 给定所有图像中的水印当前估计的区域,我们通过观察这些区域图像梯度的一致性来检测出水印梯度,也就是我们通过计算这些区域的图像梯度的中 ...
- 360自动抢票还不够,几行js代码设置无人值守
360就是牛逼哄哄的...... 但是最近在使用360浏览器抢票的时候还是发现了一些体验不好的地方,比如搞着搞着就退出了登录,有时候能帮你自动登录进去,但是自动登录之后又不会帮你自动开始抢.然后验证码 ...
- Android开发 AAC的ADTS头解析[转载]
原文地址:https://www.jianshu.com/p/b5ca697535bd 1. ADTS(Audio Data Transport Stream)头之于AAC AAC音频文件的每一帧都由 ...
- duilib教程之duilib入门简明教程6.XML配置界面
前面那些教程都是为了让小伙伴们从win32.MFC过渡到duilib,让大家觉得duilib不是那么陌生,如果大家现在还对duilib非常陌生的话,那就说明前面的教程做得不好,请大家在下面留言,我会一 ...
- bzoj 1196: [HNOI2006]公路修建问题(二分+贪心)
传送门 解题思路 看到最大,肯定要先想二分答案.二分之后首先从小到大枚举\(k\)个小于\(lim\)的所有一级公路,然后用并查集连到一起,然后就在剩下的里面从小到大找n-1-k个二级公路,模仿最小生 ...
- H5页面在手机上查看 使用手机浏览自己的web项目
参考:http://www.browsersync.cn/#install 首先全局安装BrowserSync : npm install -g browser-sync 其次在项目文件夹下运行: b ...