在nginx上部署vue項目(history模式)；

在nginx上部署vue項目(history模式)；

   vue-router 默認是hash模式，使用url的hash來模擬一個完整的url，當url改變的時候，頁面不會從新加載。可是若是咱們不想hash這種以#號結尾的路徑時候的話，咱們能夠使用路由的history的模式。好比以下網址：
使用hash模式的話，那麼訪問變成 http://localhost:8080/bank/page/count/#/ 這樣的訪問，若是路由使用 history的話，那麼訪問的路徑變成 以下：
http://localhost:8080/bank/page/count 這樣的了；

在路由的配置就是以下：咱們仍是以 vue-cli項目爲例：
在src/router/index.js 代碼以下：

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 訪問路徑不帶井號  須要使用 history模式
  base: '/bank/page',  // 基礎路徑
  routes: [
    {
      path: '/count',
      name: 'count',
      component: resolve => require(['@/views/count'], resolve) // 使用懶加載
    }
  ]
});

不過history的這種模式須要後臺配置支持。好比：
當咱們進行項目的主頁的時候，一切正常，能夠訪問，可是當咱們刷新頁面或者直接訪問路徑的時候就會返回404，那是由於在history模式下，只是動態的經過js操做window.history來改變瀏覽器地址欄裏的路徑，並無發起http請求，可是當我直接在瀏覽器裏輸入這個地址的時候，就必定要對服務器發起http請求，可是這個目標在服務器上又不存在，因此會返回404，怎麼解決呢？咱們如今能夠把全部請求都轉發到 http://localhost:8080/bank/page/index.html上就能夠了。

一： apache服務器上的配置以下：

1. 若是咱們如今是使用apache作web服務器的話，咱們須要開啓 .htaccess支持便可：
在文件里加上以下，就一切正常了

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /bank/page/index.html [L]
</IfModule>

上面的apache的做用是：把全部服務器上不存在的請求所有轉發到 index.html上去，這樣就能夠直接經過各類url來訪問了。

注意：
1. RewriteRule . /bank/page/index.html [L] 這段代碼；前面須要加 /bank/page/這樣的，由於我在路由配置base裏面
加了 /bank/page/ 這個路徑，不然匹配不到了。

2. vue-cli 項目中須要修改 config/index.js 中的build下的 assetsPublicPath: '/bank/page/', 若是使用相對路徑，
chunk文件會報錯找不到。

3. 在apache的 www/bank/page 目錄下新建 .htaccess文件，須要修改RewriteRule 爲/bank/page/index.html, 不然刷新頁面服務端會直接報404錯誤。

4. 修改httpd.conf文件，開啓rewrite_module功能。

5. LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#

6. 而後找到AllowOverride None的那行，把它改爲AllowOverride All，來使.htaccess文件生效。

二：nginx服務器上的配置以下：

vue-cli 執行打包命令：
npm run build

如上進行打包，生成dist文件夾，把該文件夾下的文件直接複製到nginx服務器目錄下，就可打開項目，可是隻有首頁能夠看到的，刷新一下頁面也是404了，緣由和上面同樣，所以須要在nginx服務器配置對全部的路徑或者文件夾進行跳轉，重定向到首頁 index.html便可：這樣就能找到路由了。
nginx服務器配置以下：

1. 首先登陸服務器。
2. 進入目錄 /etc/usr/local/nginx/conf/下;
執行命令：
   2-1 cd /etc/ 回車
   2-2 cd /usr/ 回車
   2-3 cd loacl/ 回車
   2-4 cd nginx 回車
   2-5 cd conf 回車
   2-6 vi nginx_v4.conf 進入 nginx文件內 新建一個項目的相關配置以下：

好比咱們如今的域名地址這樣訪問的：http://aa.xx.com/bank/page/count , 須要以下配置：

server {
    listen 443;     # 監聽本機全部ip上的 443 端口
    listen 80;      # 監聽本機全部ip上的 80 端口
    server_name  aa.xx.com; # 域名地址
    access_log  /data/www/logs/nginx/aa/access.log main; # 新建日誌文件
    include nginx_xx.conf; 
    /* 下面是多個location 用於配置路由地址 */
    location / {
      proxy_pass http://aa/;
      include nginx_proxy.conf;
    }
    location /bank/page/ {
      try_files $uri $uri/ /bank;
    },
    /* http://aa.xx.com/bank2/page/count 有多個不一樣的地址 就加一個以下這個配置 */
    location /bank2/page/ {
      try_files $uri $uri/ /bank2;
    }
    error_page  500 502 503 504  /502.html;
    location = /50x.html {
      root   html;
    }
  }

try_files 指令：

語法：try_files file ... uri 或 try_files file ... = code
默認值：無
做用域：server location

其做用是按順序檢查文件是否存在，返回第一個找到的文件或文件夾（結尾加斜線表示爲文件夾），若是全部的文件或文件夾都找不到，會進行一個內部重定向到最後一個參數。

須要注意的是，只有最後一個參數能夠引發一個內部重定向，以前的參數只設置內部URI的指向。最後一個參數是回退URI且必須存在，不然會出現內部500錯誤。命名的location也能夠使用在最後一個參數中。與rewrite指令不一樣，若是回退URI不是命名的location那麼$args不會自動保留，若是你想保留$args，則必須明確聲明。

location指令
語法：location [=|~|~*|^~|@] /uri/ { … }
默認值：無
做用域：server

location指令是用來爲匹配的URI進行配置，URI即語法中的"/uri/"，能夠是字符串或正則表達式。但若是要使用正則表達式，則必須指定前綴。 [@] 便是命名location，通常只用於內部重定向請求。

3. 設置成功後須要重啓：nginx重啓命令；在 /etc/usr/local/nginx/conf/ 目錄下, cd ../ 而後進入sbin目錄下 cd sbin 接着運行命令 ./nginx -s reload 重啓後便可生效。

4. 在/data/www/logs/nginx/aa/目錄下 新建 access.log 文件。
而後nginx保存和退出命令 :wq
直接退出的命令是 :q

5. mac系統下 自帶 apache2服務器，須要對apache2做反向代理；配置以下：
進入本地mac apache2配置；
命令：cd /etc/apache2
命令：sudo vi httpd.conf

<VirtualHost *:80>
  ServerName aa.xx.com
  ProxyRequests off
  Header set Access-Control-Allow-Origin *
  <Proxy *>
      Order deny,allow
      Allow from all
  </Proxy>
  <Location /aa>
      ProxyPass http://localhost:8896/
      ProxyPassReverse http://localhost:8896/
  </Location>
  // .... 更多配置省略
</VirtualHost>

而後進入 sbin目錄下 啓動服務 sudo apachectl start
重啓命令以下 sudo apachectl restart

6. java服務端的配置以下（若是是vm放到開發那邊的話，開發那邊須要以下處理下，若是頁面vm不放在開發那邊的話，下面的配置能夠忽略）
在項目目錄下 webapp/web-inf/view/ 新建文件夾 aa 和 include文件
aa文件下 新建index.vm
以下代碼：
#parse("include/common.vm")
#@frame("xx管理",true)
#css(["${version}/business/aa/aa.css"]) // 打包後的css路徑，具體看本身的路徑
<div id="app"></div>
#js(["${version}/business/aa/aa.js"]) // 打包後的js路徑，具體看本身的路徑
#end

6-2 java開發須要配置一下：
1 設置路由： /aa 設置路由到 /aa/index.vm
2 這個include/common.vm有一個地址配置，是在disconf上配置的，你加一個
地址配置到 //aa.xx.com/aa/dist 上便可