vue-cli在 history模式下的配置詳解
背景：自己搭了vue測試項目，使用的是history模式，放在后臺，一開始進入項目沒什么問，但是再一刷新頁面就404了，what?當時的比較懵逼，為啥呢？因為之前寫過項目上線過是好用的啊，這個項目按照那個寫的啊，但是解壓項目zip文件之后發(fā)現(xiàn)，WEB-INF沒有引入，瞬間就WC了，為了以防自己犯這種SX的問題浪費時間，所以打算記錄下history的配置
1、配置router/index.js
2、build/utils.js
3、webpack.prod.conf.js，這里配置因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
這里可以看官網(wǎng)文檔：https://router.vuejs.org/zh/guide/essentials/history-mode.html
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd" id="scplatform" version="2.5"> <display-name>/</display-name> <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> </web-app>
再配置webpack.prod.conf.js，因為我使用了friendly-errors-webpack-plugin壓縮插件，打包成zip包
配置到這里就結束了，希望可以給大家一點點幫助，主要是給自己看^v^！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇axios對請求各種異常情況處理的封裝方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 對象添加或刪除成員時無法實時更新的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了在vue中使用setInterval的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Vue+Element UI+Lumen實現(xiàn)通用表格分頁功能
這篇文章主要介紹了Vue+Element UI+Lumen實現(xiàn)通用表格分頁功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
當我們談論或討論在?Vue?中創(chuàng)建用戶界面組件時,經(jīng)常會提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應用這些組件時面臨的問題,以及為什么必須盡可能克服這些問題,需要的朋友可以參考下2023-10-10
為了解決加載組件中出現(xiàn)的報錯、超時、狀態(tài)展示等問題,可以使用?Vue?3?提供的異步組件（Async?Components）,它對于加載過程做了更細致的控制,這篇文章主要介紹了Vue?3?進階用法之異步組件,需要的朋友可以參考下2024-04-04
vue項目退出登錄清除store數(shù)據(jù)的三種方法
最近使用vue做用戶的登錄/退出,在開發(fā)過程中遇到的一些問題,記錄下來,下面這篇文章主要給大家介紹了關于vue項目退出登錄清除store數(shù)據(jù)的三種方法,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue如何基于es6導入外部js文件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關資料,需要的朋友可以參考下2023-02-02
Nuxt如何實現(xiàn)將服務測數(shù)據(jù)存儲到Vuex中
這篇文章主要介紹了Nuxt如何實現(xiàn)將服務測數(shù)據(jù)存儲到Vuex中的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10