关于vue.js:踩坑记录vue-cli引入umd文件无效问题

事件起因是我写了一个基于 vue 的图片上传插件，用 vue cli 打包为库后，想在本地引入 umd 包来测试插件能不能用，后果报错，次要是 Unexpected token ‘<‘ 和 ChunkLoadError：Loading chunk xx failed：

点入报错的文件链接，发现是 <!DOCTYPE html> 标签谬误：

搜寻一番后，根本能够确定是引入谬误，然而不晓得起因。

在搜索引擎挣扎许久，也尝试过更改 publicPath、增加 @babel/plugin-transform-modules-umd 等均有效，次要是不晓得根本原因。

在看到这两篇博文（webpack 之 Loading chunk x failed、Vue CLI build –target lib 时如何防止打包成多个 umd.js 文件）后，分割联合，猜想起因是分包加载谬误：webpack 打包库会将代码分成多个包（看下图），在 vue 我的项目中只引入 *.umd.js，然而其余分包没有按程序引入，因为被浏览器拦挡申请篡改了分包内容（具体可见下面提及的第一篇博文），不能保障代码的程序执行。

那么能够尝试将代码打包为一个文件，这样不须要保障 script 代码执行程序，试试是否见效。

须要批改 vue.config.js：

限度打包为一个包
批改 css.extract 为 false，示意不将 css 文件独自抽离，省得用户本人导入 CSS

// vue.config.js
const webpack = require("webpack");
module.exports = {
  css: {extract: false},
  configureWebpack: {
    plugins: [
      // 限度只打一个包，不分 Chunk
      new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1})
    ],
    // 当库外面引入了比拟大的文件时，为了不影响主包大小，须要设置下该包应用内部引入
    externals: {echarts: "echarts"}
  }
};

再次打包：

尝试引入应用，果然胜利了：

尽管依着下面的思路问题是解决了，然而是否就是这个起因，自己也无奈非常确定（兴许是歪打正着了 :)）。
如果有人有更好的想法，欢送探讨 ^_^

更多学习笔记请戳：https://github.com/6fa/WebKnowledge

webpack 之 Loading chunk x failed
Vue CLI build –target lib 时如何防止打包成多个 umd.js 文件

关于vue.js:踩坑记录vue-cli引入umd文件无效问题

问题

尝试解决

总结

参考