在nginx上部署vue專案(history模式)；

龍恩0707發表於2017-12-27
NginxVue模式

在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 上即可

相關文章