1.問題描述

• 我們前端在開發(fā)完成之后，總會(huì)在通過npm run build進(jìn)行打包，并且可以通過vsCode的Go Live或者啟動(dòng)node服務(wù)進(jìn)行啟動(dòng)查看，再或者直接發(fā)布到線上；但是卻不能通過雙擊打包內(nèi)的index.html 來進(jìn)行打開。

2.原因描述

這是因?yàn)?code>dist文件是需要放在服務(wù)器上運(yùn)行的，資源默認(rèn)放在根目錄下。打開index.html可以發(fā)現(xiàn)，css和js文件的引用使用的是絕對路徑，例如：<link href=/css/chunk-00d5eabc.f78fa75d.css rel=prefetch>，對本地磁盤來說，/指向磁盤根目錄，找不到引用的文件,所以我們需要將路徑改為<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>，這種方式。

3.解決方案將絕對路徑改為相對路徑

3.1 可以選擇手動(dòng)將index.html中所有引用資源的地方全部改成相對路徑，如：<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打包后，打開dist/index.html發(fā)現(xiàn)所有資源的引用形式已經(jīng)變?yōu)橄鄬β窂剑?code><link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>，此時(shí)可以雙擊index.html在瀏覽器中正常訪問了！
3.3 提示注意

• 該種方式自能在vue-router的默認(rèn)hash模式下，如果是history,則還是不行。

const router = new VueRouter({
  mode:  'hash' ，
  routes: [],
})

• 如果您在項(xiàng)目中做了分包處理，也盡量避免

5.文章參考

感謝舉杯邀明月：三種方案解決Vue項(xiàng)目打包后dist中的index.html用瀏覽器無法直接打開的問題
感謝靜心安靜讀書：Vue項(xiàng)目打包，如何雙擊index.html即可靜態(tài)訪問？