Monaco-editor和webpack dev服务器无法正常工作

Question

我正在使用ngx-monaco-editor组件和Angular 5。 摩纳哥编辑器在localhost上正常加载，但在我的开发服务器上没有。

  

带源代码的脚本加载失败   “https://se-dnexec.cic.muc/assets/monaco/vs/loader.js”。

这是我的webpack.common配置（在插件下）：

 new WriteFilePlugin(),
 new CopyWebpackPlugin([
    {
      from: 'src/assets',
      to: 'assets'
    },
    {
      from: 'src/meta'
    },
    {
      from: 'node_modules/ngx-monaco-editor/assets/monaco',
      to: 'assets/monaco/',
    }
  ],
    isProd ? {
      ignore: ['mock-data/**/*']
    } : undefined
  ),

在webpack.dev中我正在使用webpack.common中的配置。

当我从资产下的localhost运行应用程序时，我可以看到这一点。

但是当从dev-server运行时，我发现缺少monaco文件夹：

我正在使用：

• copy-webpack-plugin：“^ 4.5.1”，
• write-file-webpack-plugin：“^ 4.2.0”
• webpack：“^ 3.11.0”，
• webpack-dev-server：“~2.7.1”，

我希望当我运行资源文件夹下的dev-server时，monaco文件夹也会被复制，但由于某些原因并非如此。也许有人遇到了同样的问题，可以帮助我。 （如果需要进一步的信息，我可以提供）。

我尝试了以下解决方案：Does not copy files to actual output folder when webpack-dev-server is used

Answer 1

我正在使用Angular 5的ngx-monaco-editor组件。我检查了路径是否有问题，本地它可以正常工作，但在服务器上却没有。所以这就是我必须要做的解决方案：

在NgxMonacoEditorConfig中，我做了以下事情：

baseUrl: './assets'

Answer 2

如果您使用nginx服务于您的生产发行版，则需要覆盖monaco的资产路径，如下所示：

server {

    server_name localhost;
    listen      80;
    root        /usr/share/nginx/html;
    index       index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html =404;

    }

    location /assets/monaco/vs {

        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;

    }

}

希望这可以为其他人节省5个小时！