在nginx上部署vue專案（詳細教學）

vue-router 預設是hash模式，使用url的hash來模擬一個完整的url，當url改變的時候，頁面不會重新載入。這篇文章主要介紹了在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路径，具体看自己的路径
<p id="app"></p>
#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 上即可

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用vue2.0.js实现多级联动选择器

使用mint-ui实现省市区三级联动效果

使用vue实现二级路由设置方法

以上是在nginx上部署vue專案（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！