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