Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁(yè)面時(shí)找不到資源
更新時(shí)間：2024年03月08日 10:11:36 作者：小破孩呦
這篇文章主要介紹了Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁(yè)面時(shí)找不到資源問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
背景：
最近做一個(gè)項(xiàng)目打包后需要部署在非根目錄的文件夾內(nèi)進(jìn)行訪問
對(duì)于這一問題一開始很是頭疼，最后查找和詢問同事之后得到如下方法：
1、先解決如何配置非根目錄訪問的方式
如下：
假設(shè)打包后的dist文件內(nèi)容需要部署到非根目錄http.xxx.com/test子路徑下，解決步驟如下：
- 修改vue.config.js中的publicPath
module.exports = {
publicPath: "/test/", //打包后部署在一個(gè)子路徑上http:xxx/test/
productionSourceMap: false,
devServer: {
// proxy: "http://xxxx.com", //測(cè)試或正式環(huán)境域名和端口號(hào)
},
};- 修改路由router的/index.js
const router = new VueRouter({
mode: "history",//路由模式
base: "/test/",//部署的子路徑
routes,
});
export default router;- 后端需要幫忙配置
Nginx配置：
location ^~/m {
try_files $uri $uri/ /m/index.html;
}Apache配置：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>至此配置完成?。。?/strong>
但是此時(shí)vue使用history模式下 部署 tomcat 時(shí)刷新頁(yè)面就會(huì)出現(xiàn)404，找不到資源的問題
可以簡(jiǎn)單理解History模式跟Hash的區(qū)別就是URL不帶#號(hào)，History需要后臺(tái)配置支持
- 在URL中瀏覽器不會(huì)把#后邊的參數(shù)傳給服務(wù)端，使用Hash模式時(shí)后端同學(xué)也不需要單獨(dú)處理，不會(huì)返回404頁(yè)面，但是有時(shí)候自動(dòng)會(huì)直接過濾#后邊的參數(shù)，對(duì)應(yīng)傳參來說不夠方便。
- 當(dāng)使用History時(shí)URL中不帶#，請(qǐng)求服務(wù)器時(shí)將整個(gè)URL發(fā)送給服務(wù)端，如果沒有進(jìn)行相關(guān)的路由配置處理，服務(wù)端會(huì)不認(rèn)識(shí)，返回404或空白頁(yè)面，所有使用History模式需要后臺(tái)對(duì)路由地址進(jìn)行相應(yīng)的處理。
2、此時(shí)就需要解決在Tomcat上頁(yè)面刷新找不到資源的問題了
如下：
在 Tomcat 下 webapps→test（test項(xiàng)目文件名）→創(chuàng)建WEB-INF→創(chuàng)建web.xml
web.xml 內(nèi)容如下：
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true"> <display-name>Router for Tomcat</display-name> <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> </web-app>
總結(jié)
至此兩個(gè)問題解決完成?。?！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼
這篇文章主要介紹了Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
混入(mixin)是一種非常靈活的方式,用來分發(fā)Vue組件中可復(fù)用的功能,一個(gè)混入對(duì)象可以包含任意組件選項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue混入和繼承的相關(guān)資料,需要的朋友可以參考下2021-09-09
用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼
這篇文章主要介紹了用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue中跨域以及sessionId不一致問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue: WebStorm設(shè)置快速編譯運(yùn)行的方法
今天小編就為大家分享一篇vue: WebStorm設(shè)置快速編譯運(yùn)行的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
基于element-ui中el-select下拉框選項(xiàng)過多的優(yōu)化方案
這篇文章主要介紹了基于element-ui中el-select下拉框選項(xiàng)過多的優(yōu)化方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了最新vue-cli 2.9.1的webpack存在問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue之Element-Ui輸入框顯示與隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04