vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題(兩種方案)
更新時(shí)間：2023年11月10日 09:19:06 作者：HarmonyOS體驗(yàn)官-春波
本文主要介紹了vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題,主要介紹了兩種方式,具有一定的參考價(jià)值,感興趣的可以了解一下
今天帶來(lái)的攻略是:vue項(xiàng)目 打包后dist 目錄下index.html 打開(kāi)后顯示空白的問(wèn)題。
解決方式很簡(jiǎn)單：一??
方案1、關(guān)掉router.js中的哈希模式
注釋掉 mode：'history' 重新npm run build打包即可
//mode: 'history' 注釋即可
方案2、修改config配置文件
如果沒(méi)有vue.config.js 文件 可主動(dòng)進(jìn)行配置 一?? 常用的簡(jiǎn)單配置 在文末 ??????
打開(kāi)vue.config.js 文件
在vue.config.js文件中 找到publicPath：'/' 將其 '/' 【根目錄】修改為'./'【當(dāng)前目錄】，重新npm run build 打包即可
vue.config.js 基本配置源碼：
//vue.config.js
const port = 3000; // 端口配置
module.exports = {
devServer: {
port, //設(shè)置端口
},
publicPath: './',//修改目錄
outputDir: 'dist', // build時(shí)構(gòu)建文件的目錄 構(gòu)建時(shí)傳入 --no-clean 可關(guān)閉該行為
assetsDir: 'assets', // build時(shí)放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄
filenameHashing: true, // 默認(rèn)在生成的靜態(tài)資源文件名中包含hash以控制緩存
runtimeCompiler: false, // 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本
productionSourceMap: true, // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建
};
效果演示：
到此這篇關(guān)于vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題(兩種方案)的文章就介紹到這了,更多相關(guān)vue index.html網(wǎng)頁(yè)顯示空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決VUEX的mapState/...mapState等取值問(wèn)題
這篇文章主要介紹了解決VUEX的mapState/...mapState等取值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
emits是Vue3新增的選項(xiàng),emits主要作用在子組件中,用于接收在父組件中綁定的方法,這篇文章主要給大家介紹了關(guān)于vue3.x中emits的基本用法,需要的朋友可以參考下2022-07-07
淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑
今天小編就為大家分享一篇淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue使用Vuex一步步封裝并使用store全過(guò)程
這篇文章主要介紹了Vue使用Vuex一步步封裝并使用store全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了vue封裝組件js版基本步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
Vue3（三）網(wǎng)站首頁(yè)布局開(kāi)發(fā)
這篇文章主要介紹了Vue3網(wǎng)站首頁(yè)布局開(kāi)發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來(lái)看看Vue3網(wǎng)站首頁(yè)布局開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例代碼
Vue3是Vue.js的最新版本,它帶來(lái)了許多令人興奮的新特性和改進(jìn),其中一個(gè)重要的特性是Suspense,它為我們提供了一種優(yōu)雅地處理異步組件加載和錯(cuò)誤處理的方式,本文給大家介紹了Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue如何關(guān)閉prettier警告warn問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇axios 封裝上傳文件的請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
相信tab切換對(duì)于大家來(lái)說(shuō)都不算陌生，后臺(tái)管理系統(tǒng)中多會(huì)用到。如果不知道的話，可以看一下瀏覽器上方的標(biāo)簽頁(yè)切換，大概效果就是這樣。2021-05-05