快捷導(dǎo)航

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ò)誤或未考慮完全的地方,望不吝賜教

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>

至此配置完成?。?！

但是此時(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>