vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題(兩種方案)
今天帶來(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)文章
本文介紹了如何在Vue中定義和使用自定義指令,包括指令的注冊(cè)、鉤子函數(shù)、參數(shù)以及常見(jiàn)指令的封裝,如v-copy、v-longpress等,自定義指令在處理某些底層DOM操作時(shí)非常便捷,感興趣的朋友一起看看吧2025-01-01
Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?
前幾天在vue運(yùn)行項(xiàng)目過(guò)程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue Build后的項(xiàng)目的根路徑配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutati
這篇文章主要介紹了解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutation?handlers問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue+ElementUI使用vue-pdf實(shí)現(xiàn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI使用vue-pdf實(shí)現(xiàn)預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue中的 scoped 屬性,其實(shí)就是給每一個(gè)dom節(jié)點(diǎn)元素都添加了不重復(fù)的自定義屬性（如：data-v-6810cbe5）,本文給大家介紹vue中的scoped屬性相關(guān)知識(shí),感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue中倒計(jì)時(shí)組件的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07