vue-cli 2.x index.html 引入 static 靜態資源注意

B1an發表於2020-01-02
VueIndexHTML

利用 vue-cli 2.x 構建的專案, 當在 index.html 中通過相對路徑引入第三方靜態資源後, 且打包選項設定了 assetsPublicPath 後, 在未設定其他選項時會發現打包後的頁面找不到 index.html 中直接引入的第三方資源.

這時候我們可以在 webpack.prod.conf.js 中設定相關打包配置

new HtmlWebpackPlugin({
  // 新增 path選項
  path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
})
複製程式碼

修改 index.html 中資源引入方式:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <!--修改後的引入方式-->
    <script src=<%= htmlWebpackPlugin.options.path %>/md5.js></script>
  </body>
</html>
複製程式碼

修改後, 重新打包後即可~

相關文章