Vue實現(xiàn)項目部署到非根目錄及解決刷新頁面時找不到資源

更新時間：2024年03月08日 10:11:36 作者：小破孩呦

這篇文章主要介紹了Vue實現(xiàn)項目部署到非根目錄及解決刷新頁面時找不到資源問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1、先解決如何配置非根目錄訪問的方式

如下：

假設(shè)打包后的dist文件內(nèi)容需要部署到非根目錄http.xxx.com/test子路徑下，解決步驟如下：

修改vue.config.js中的publicPath

module.exports = {
    publicPath: "/test/", //打包后部署在一個子路徑上http:xxx/test/
    productionSourceMap: false,
    devServer: {
        // proxy: "http://xxxx.com", //測試或正式環(huán)境域名和端口號
    },
};

修改路由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>

至此配置完成！??！

但是此時vue使用history模式下部署 tomcat 時刷新頁面就會出現(xiàn)404，找不到資源的問題

可以簡單理解History模式跟Hash的區(qū)別就是URL不帶#號，History需要后臺配置支持

在URL中瀏覽器不會把#后邊的參數(shù)傳給服務(wù)端，使用Hash模式時后端同學(xué)也不需要單獨處理，不會返回404頁面，但是有時候自動會直接過濾#后邊的參數(shù)，對應(yīng)傳參來說不夠方便。
當(dāng)使用History時URL中不帶#，請求服務(wù)器時將整個URL發(fā)送給服務(wù)端，如果沒有進(jìn)行相關(guān)的路由配置處理，服務(wù)端會不認(rèn)識，返回404或空白頁面，所有使用History模式需要后臺對路由地址進(jìn)行相應(yīng)的處理。

2、此時就需要解決在Tomcat上頁面刷新找不到資源的問題了

如下：

在 Tomcat 下 webapps→test（test項目文件名）→創(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>