Vue2项目webpack打包的JS文件引入其他应用后不生效如何解决？

问题原因 #

• 开发模式下webpack自动拆分了依赖chunk，单独引入业务chunk缺失前置依赖
  Vue CLI 运行yarn serve（开发模式）时，webpack默认会将构建产物拆分为三个独立的chunk：webpack运行时chunk（webpack-runtime.js）、第三方公共依赖chunk（chunk-vendors.js）、你的业务代码chunk（mvcapp.js）。三个chunk存在依赖顺序，必须按先后顺序全部引入才能正常执行。你仅单独引入了mvcapp.js，缺失了webpack模块加载必须的运行时代码，业务逻辑自然无法触发。
  本地Vue项目运行正常是因为Vue CLI自动生成的index.html会按正确顺序注入所有依赖的chunk，所以可以正常执行代码。
• 默认打包配置未设置独立执行规则
  默认配置下，Vue CLI的webpack构建产物是为项目内部加载设计的，入口代码会被封装为webpack内部模块，不会主动执行。如果要作为外部资源被其他项目引用，需要额外配置打包格式。

解决方案 #

1. 调整vue.config.js配置，将自定义入口打包为可独立执行的格式

// vue.config.js
module.exports = {
    configureWebpack: {
        entry: {
            mvcapp: [
                './src/main-mvc.ts',
            ],
        },
        output: {
            // 配置打包为UMD格式，兼容不同场景的引入方式
            library: 'MvcApp',
            libraryTarget: 'umd',
            filename: 'js/[name].js'
        },
        optimization: {
            // 开发模式下关闭runtime拆分，将运行时代码合并到入口chunk中
            runtimeChunk: false,
            splitChunks: {
                chunks: 'async' // 仅拆分异步加载的chunk，不拆分同步入口的依赖
            }
        }
    },
};

2. 生产环境使用时，不要使用yarn serve生成的开发模式产物，执行yarn build获取生产构建产物后再引用。开发模式产物包含大量调试逻辑，且拆分规则复杂，不适合作为外部资源使用。
3. 如果必须使用开发模式的产物进行调试，需要将Vue项目自动生成的index.html中引入的所有JS文件按顺序全部引入到你的sample.html中，不能仅引用mvcapp.js单个文件。

内容的提问来源于stack exchange，提问作者coure2011