vue-cli 2.x index.html 引入 static 静态资源注意

2020-01-02 2,116 阅读1分钟

利用 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>

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