之前讲述了怎么在vue项目中使用monaco-editor （），使用是正常的，虽然 npm run build 打包后文件能够正常使用，但是文件结构很乱，而且很大。

1. 初步解决，使用（）进行打包配置（在webpack.base.conf.js进行配置）

new MonacoWebpackPlugin({      languages:['sql','json'],      output：'./static/js/monaco-editor'    })

这样文件相对整洁一些，而且我只是用了editor的sql和json，只对这两种语言进行打包，比之前的打包文件小了20+M。但是：js中还是会出现以数字开头的js文件，没有找到规整办法，而且打包文件还是非常大，editor占了将近30M。

2. 最终办法：使用AMD域名的方式引入（）。注意我这里还是在vue-cli2的项目中使用，只是不用之前ESM的方式了。

（1） index.html中引用并加载monaco-editor

（2）npm install html-loader --save-dev (不进行此步会报错)

（3）在webpack.base.conf.js进行配置

module: {    rules: [      ...,      {        test: /\.html$/,        loader: 'html-loader'      }    ]  },

注意：在vue-cli3的项目中配置在vue.config.js中：

module.exports = {    ···    chainWebpack: config => {        config.module            .rule('html')            .test(/\.html$/)            .use('html-loader')            .loader('html-loader')    }  ···}

 

（4）如果项目是用ts写的，那么需要将monaco-editor的声明文件复制到自己的项目中，不然下一步使用monaco时会报错

(5) 在使用的地方使用monaco.editor.create创建即可