Vue Cli 3.0實現打包後直接訪問

前言

默認情況下，使用 npm run build 打包後的 index.html 無法直接訪問，需要nginx轉發或使用node啓用簡單http serve實現。

實際開發中，有時需臨時打開前端項目，若可以直接打開打包後的文件，對某些場景下他人簡單使用或調試較爲方便。

實現

• 確保vue-router模式爲 hash 模式
• 修改vue.config.js中publicPath爲 ' ./ ' 即可
• 若index.html有文件的引用，修改爲正確的（相對）路徑即可

router.js

const router = new Router({
  mode: 'history', // 註釋該行即可 默認使用 hash 模式
  base: process.env.BASE_URL,
  routes: []
})

vue.config.js

module.exports = {
  // 根路徑 默認使用/ vue cli 3.3+ 棄用 baseUrl
  publicPath: '/' // 此處改爲 './' 即可
}

Tips：

• vue cli 默認不會生成vue.config.js，根目錄下手動創建即可
• vue下webpack簡單配置可參考文章 vue中webpack簡單配置