vue2 + koa2全栈部署

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