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