monaco editor是vscode的禦用編輯器。

功能非常強大，使用方便輕巧，對js\ts等等語言支持都良好，能方便的擴展以支持其他語言或者自定義的特性。

誇了這麽多，這裏只說它一個問題:

這貨和vue不兼容。

解決這個問題很簡單，使用vue-monaco-editor即可，可以通過npm安裝。

npm install vue-monaco-editor --save-dev

現在問題又來了

這貨文檔有問題的，如下：

這裏寫了默認的srcPath是""，也就是本地的意思

並沒有。

srcPath默認是null，所以請自己在標簽上加上 srcPath=""

然後呢，需要讓本地的monaco能被訪問到，webpack加入下面的配置：

const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: ‘node_modules/monaco-editor/min/vs‘,
        to: ‘vs‘,
      }
    ])
  ]
};

vue-monaco-editor解決monaco引用的思路是:

如果window.monaco已經註冊，則不做任何事

如果沒有，就以<script>形式引用monaco editor。

monaco editor + vue的配置