vue-cli在 history模式下的配置詳解
背景：自己搭了vue測(cè)試項(xiàng)目，使用的是history模式，放在后臺(tái)，一開(kāi)始進(jìn)入項(xiàng)目沒(méi)什么問(wèn)，但是再一刷新頁(yè)面就404了，what?當(dāng)時(shí)的比較懵逼，為啥呢？因?yàn)橹皩?xiě)過(guò)項(xiàng)目上線過(guò)是好用的啊，這個(gè)項(xiàng)目按照那個(gè)寫(xiě)的啊，但是解壓項(xiàng)目zip文件之后發(fā)現(xiàn)，WEB-INF沒(méi)有引入，瞬間就WC了，為了以防自己犯這種SX的問(wèn)題浪費(fèi)時(shí)間，所以打算記錄下history的配置
1、配置router/index.js
2、build/utils.js
3、webpack.prod.conf.js，這里配置因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。
所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。
這里可以看官網(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，因?yàn)槲沂褂昧薴riendly-errors-webpack-plugin壓縮插件，打包成zip包
配置到這里就結(jié)束了，希望可以給大家一點(diǎn)點(diǎn)幫助，主要是給自己看^v^！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue登錄頁(yè)面設(shè)置驗(yàn)證碼input框的方法
這篇文章主要為大家詳細(xì)介紹了vue登錄頁(yè)面設(shè)置驗(yàn)證碼input框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文作者分享了使用Vue進(jìn)行代理配置的個(gè)人經(jīng)驗(yàn),介紹了如何使用proxyTable進(jìn)行跨域請(qǐng)求配置,并提供了具體的配置文件和使用方法,便于同行參考和學(xué)習(xí)2024-10-10
vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)
這周工作中遇見(jiàn)了一個(gè)表格動(dòng)態(tài)列的需求,下面這篇文章主要給大家介紹了關(guān)于vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
本文主要是帶領(lǐng)大家分析$mount的相關(guān)知識(shí)，需要的朋友一起學(xué)習(xí)吧2017-12-12
解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題
今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue3保存屬性自動(dòng)換行問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue-cli3搭建項(xiàng)目的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Vue的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
unplugin-auto-import與unplugin-vue-components安裝問(wèn)題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問(wèn)題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個(gè)前端框架構(gòu)建的思維導(dǎo)圖組件或庫(kù),它可以幫助開(kāi)發(fā)者在Web應(yīng)用中創(chuàng)建動(dòng)態(tài)、交互式的思維導(dǎo)圖,讓用戶可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖,需要的朋友可以參考下2024-07-07