1.問(wèn)題描述
- 我們前端在開(kāi)發(fā)完成之后削罩，總會(huì)在通過(guò)
npm run build進(jìn)行打包，并且可以通過(guò)vsCode的Go Live或者啟動(dòng)node服務(wù)進(jìn)行啟動(dòng)查看费奸，再或者直接發(fā)布到線上弥激；但是卻不能通過(guò)雙擊打包內(nèi)的index.html 來(lái)進(jìn)行打開(kāi)。
2.原因描述
這是因?yàn)?code>dist文件是需要放在服務(wù)器上運(yùn)行的愿阐，資源默認(rèn)放在根目錄下微服。打開(kāi)index.html可以發(fā)現(xiàn)，css和js文件的引用使用的是絕對(duì)路徑缨历，例如：<link href=/css/chunk-00d5eabc.f78fa75d.css rel=prefetch>以蕴，對(duì)本地磁盤來(lái)說(shuō)，/指向磁盤根目錄辛孵，找不到引用的文件,所以我們需要將路徑改為<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>丛肮，這種方式。
3.解決方案將絕對(duì)路徑改為相對(duì)路徑
3.1 可以選擇手動(dòng)將index.html中所有引用資源的地方全部改成相對(duì)路徑魄缚，如：<link href=./css/chunk-00d5eabc.f78fa75d.css rel=prefetch>或<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>
3.2 修改vue.config.js
module.exports = {
// publicPath: './', // 基本路徑
// assetsDir: 'static', // 放置靜態(tài)資源的目錄
// indexPath: 'index.html', // html 的輸出路徑
publicPath: './' ,
}
此時(shí)再運(yùn)行npm run build打包后腾供，打開(kāi)dist/index.html發(fā)現(xiàn)所有資源的引用形式已經(jīng)變?yōu)橄鄬?duì)路徑：<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>，此時(shí)可以雙擊index.html在瀏覽器中正常訪問(wèn)了鲜滩！
3.3 提示注意
- 該種方式自能在vue-router的默認(rèn)
hash模式下，如果是history,則還是不行节值。
const router = new VueRouter({
mode: 'hash' 徙硅，
routes: [],
})
- 如果您在項(xiàng)目中做了分包處理，也盡量避免
5.文章參考
感謝舉杯邀明月：三種方案解決Vue項(xiàng)目打包后dist中的index.html用瀏覽器無(wú)法直接打開(kāi)的問(wèn)題
感謝靜心安靜讀書(shū)：Vue項(xiàng)目打包搞疗，如何雙擊index.html即可靜態(tài)訪問(wèn)嗓蘑？
