您好,登錄后才能下訂單哦!
vue-router 默認(rèn)是hash模式,使用url的hash來模擬一個完整的url,當(dāng)url改變的時候,頁面不會重新加載。但是如果我們不想hash這種以#號結(jié)尾的路徑時候的話,我們可以使用路由的history的模式。比如如下網(wǎng)址:
使用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', // 基礎(chǔ)路徑 routes: [ { path: '/count', name: 'count', component: resolve => require(['@/views/count'], resolve) // 使用懶加載 } ] });
不過history的這種模式需要后臺配置支持。比如:
當(dāng)我們進行項目的主頁的時候,一切正常,可以訪問,但是當(dāng)我們刷新頁面或者直接訪問路徑的時候就會返回404,那是因為在history模式下,只是動態(tài)的通過js操作window.history來改變?yōu)g覽器地址欄里的路徑,并沒有發(fā)起http請求,但是當(dāng)我直接在瀏覽器里輸入這個地址的時候,就一定要對服務(wù)器發(fā)起http請求,但是這個目標(biāo)在服務(wù)器上又不存在,所以會返回404,怎么解決呢?我們現(xiàn)在可以把所有請求都轉(zhuǎn)發(fā)到 http://localhost:8080/bank/page/index.html上就可以了。
一: apache服務(wù)器上的配置如下:
1. 如果我們現(xiàn)在是使用apache做web服務(wù)器的話,我們需要開啟 .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的作用是:把所有服務(wù)器上不存在的請求全部轉(zhuǎn)發(fā)到 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, 否則刷新頁面服務(wù)端會直接報404錯誤。
4. 修改httpd.conf文件,開啟rewrite_module功能。
5. LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#
6. 然后找到AllowOverride None的那行,把它改成AllowOverride All,來使.htaccess文件生效。
二:nginx服務(wù)器上的配置如下:
vue-cli 執(zhí)行打包命令:
npm run build
如上進行打包,生成dist文件夾,把該文件夾下的文件直接復(fù)制到nginx服務(wù)器目錄下,就可打開項目,但是只有首頁可以看到的,刷新一下頁面也是404了,原因和上面一樣,因此需要在nginx服務(wù)器配置對所有的路徑或者文件夾進行跳轉(zhuǎn),重定向到首頁 index.html即可:這樣就能找到路由了。
nginx服務(wù)器配置如下:
1. 首先登錄服務(wù)器。
2. 進入目錄 /etc/usr/local/nginx/conf/下;
執(zhí)行命令:
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文件內(nèi) 新建一個項目的相關(guān)配置如下:
比如我們現(xiàn)在的域名地址這樣訪問的:http://aa.xx.com/bank/page/count , 需要如下配置:
server { listen 443; # 監(jiān)聽本機所有ip上的 443 端口 listen 80; # 監(jiān)聽本機所有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
默認(rèn)值:無
作用域:server location
其作用是按順序檢查文件是否存在,返回第一個找到的文件或文件夾(結(jié)尾加斜線表示為文件夾),如果所有的文件或文件夾都找不到,會進行一個內(nèi)部重定向到最后一個參數(shù)。
需要注意的是,只有最后一個參數(shù)可以引起一個內(nèi)部重定向,之前的參數(shù)只設(shè)置內(nèi)部URI的指向。最后一個參數(shù)是回退URI且必須存在,否則會出現(xiàn)內(nèi)部500錯誤。命名的location也可以使用在最后一個參數(shù)中。與rewrite指令不同,如果回退URI不是命名的location那么
args不會自動保留,如果你想保留args,則必須明確聲明。
location指令
語法:location [=|~|~*|^~|@] /uri/ { … }
默認(rèn)值:無
作用域:server
location指令是用來為匹配的URI進行配置,URI即語法中的"/uri/",可以是字符串或正則表達式。但如果要使用正則表達式,則必須指定前綴。 [@] 即是命名location,一般只用于內(nèi)部重定向請求。
3. 設(shè)置成功后需要重啟: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系統(tǒng)下 自帶 apache2服務(wù)器,需要對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目錄下 啟動服務(wù) sudo apachectl start
重啟命令如下 sudo apachectl restart
6. java服務(wù)端的配置如下 (如果是vm放到開發(fā)那邊的話,開發(fā)那邊需要如下處理下,如果頁面vm不放在開發(fā)那邊的話,下面的配置可以忽略)
在項目目錄下 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開發(fā)需要配置一下:
1 設(shè)置路由: /aa 設(shè)置路由到 /aa/index.vm
2 這個include/common.vm有一個地址配置,是在disconf上配置的,你加一個
地址配置到 //aa.xx.com/aa/dist 上即可
總結(jié)
以上所述是小編給大家介紹的在nginx上部署vue項目(history模式)的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。