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 上即可
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上是在nginx上部署vue專案(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!