1.首先打包前端上传

修改config下的index.js 代理地址为服务器IP

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/vvkoa/',
productionSourceMap: false,
proxyTable: {
'/auth': {
target: 'http://192.168.222.246/vvkoa-api',//浏览器浏览地址
changeOrigin: true
},
'/api': {
target: 'http://127.0.0.1:8889',
changeOrigin: true
}
},
修改mian.js
Vue.prototype.$http = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? 'http://192.168.222.246/vvkoa-api' : '/'
}) // 类似于vue-resource的调用方法
const router = new VueRouter({
mode: 'history',
base: '/vvkoa/',
routes: [{
path: '/',
component: Login
},

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全栈部署的更多相关文章

  1. Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

    1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa- ...

  2. 一款基于SSM框架技术的全栈Java web项目(已部署可直接体验)

    概述 此项目基于SSM框架技术的Java Web项目,是全栈项目,涉及前端.后端.插件.上线部署等各个板块,项目所有的代码都是自己编码所得,每一步.部分都有清晰的注释,完全不用担心代码混乱,可以轻松. ...

  3. Express+Mongoose(MongoDB)+Vue2全栈微信商城项目全记录(二)

    用mogoose搭建restful测试接口 接着上一篇(Express+Mongoose(MongoDB)+Vue2全栈微信商城项目全记录(一))记录,今天单独搭建一个restful测试接口,和项目前 ...

  4. vue3+node全栈项目部署到云服务器

    一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和 ...

  5. web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)

    web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2) 主要技术 前端 vue 全家桶 ElementUI 后端 Node.js Koa2 Mongoess 数据库 mong ...

  6. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下 ...

  7. 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...

  8. vuejs、eggjs全栈式开发设备管理系统

    vuejs.eggjs全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展现,包含设备参数分析.发送设备报警等模块.收获还是 ...

  9. 一个 Vue & Node 的全栈小项目

    约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...

随机推荐

  1. Unity中DoTween的使用

    在Unity手游开发中,经常用到插值运算,我们可以使用Mathf.Lerp自行去实现效果,但是使用插件提高了我们的开发效率,这里归结一下DoTween的基本使用方式以及效果说明: 直接代码: usin ...

  2. iphone11系统输入框的光标位置不正常

    本人的系统是11.3的是正常的,却发现测试机的11.1和11.2的光标位置在输入框的下边.百度一下,很多人有同样的问题,在此记录一下 解决办法一: //弹框弹出后执行如下代码 $('body').cs ...

  3. Java获取文件Content-Type(Mime-Type)

    Java获取文件Content-Type(Mime-Type) 刚好工作中要用到,所以总结一下.推荐使用第一种和第三种,实在不行,也可以去把http://tool.oschina.net/common ...

  4. Python学习笔记(六)——类和对象

    1.self的用法 全面理解self 2. 继承 子类继承父类,自动拥有父类的全部方法 >>> class Animal: def run(self): print('Animal ...

  5. BCZM : 1.7

    光影切割 在一个平面内有一个矩形区域,直线穿过矩形可以将其分割为不同的区域,且在这个平面中不存在三条直线相交一点的情况.求当有N条直线穿过矩形时,它被分割为多少个区域? 解法一:      平面倍划分 ...

  6. JAVA算法之递归

    Ⅰ.三角数字 首先我们来看一组数字:1,3,6,10,15,21.....,在这个数列中第n项是由n-1项加n得到的,这个序列中的数字称为三角数字因为他们可以形象化地表示成一个三角形排列.如下图 通过 ...

  7. CSIC_716_20191112【闭包函数和装饰器】

    闭包函数 什么是闭包函数:闭包函数是函数嵌套.函数对象.名称空间和作用域的集合体. 闭包函数必须在函数内部定义,闭包函数可以引用外层函数的名字. # _*_ coding: gbk _*_ # @Au ...

  8. 廖雪峰Java16函数式编程-2Stream-1Stream简介

    1. Stream Java8引入全新的Stream API 位于java.util.stream包 1.1 Stream API不同于java.io的InputStream/OutputStream ...

  9. Pipe进程之间的通信

    #_author:来童星#date:2019/12/11#Pipefrom multiprocessing import Process, Pipedef f(conn): conn.send([42 ...

  10. C/C++ 字符、字符串转十六进制(支持中文字符串转换)

    #include <string> // std::string #include <sstream> // std::stringstream /** * #purpose ...