monaco editor + vue的配置

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。