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