摩纳哥编辑器和 webpack 开发服务器不工作

Question

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

Loading failed for the script with source “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 资产下的应用程序时，我可以看到这个。

但是当从开发服务器运行ning 时，我发现 monaco 文件夹丢失了：

我正在使用：

copy-webpack-plugin: "^4.5.1",
write-file-webpack-plugin: "^4.2.0"
webpack: "^3.11.0",
webpack-dev-server: "~2.7.1",

我希望当我运行 assets 文件夹下的 dev-server 时，monaco 文件夹也被复制，但由于某些原因，情况并非如此。也许有人遇到过同样的问题并且可以帮助我。（如果需要更多信息，我可以提供）。

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

Answer 1

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

在 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 个小时！

摩纳哥编辑器和 webpack 开发服务器不工作

Monaco-editor and webpack dev server not working

angular5

webpack-dev-server

monaco-editor