设置<base href="/1/">后Monaco Editor无法加载Webpack打包文件求助

我来帮你搞定这个头疼的路径问题，针对你提出的两个疑问，分别给你具体的解决方案：

疑问1：让Webpack生成不带/1/前缀的资源路径 #

当然可以！关键是修改Webpack配置里的publicPath参数，它直接决定了打包后资源文件的引用前缀。

在你的webpack.config.js中，找到output配置项，添加publicPath: '/'：

const path = require('path');

module.exports = {
  // ...其他配置项
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 核心配置：强制资源引用以根路径开头
  },
  // ...其他插件、loader配置
};

重新打包后，Webpack生成的chunk文件（比如3.bundle.js、11.bundle.js）的引用路径都会变成/3.bundle.js，完全忽略<base href="/1/">的影响。结合你已经配置的app.use(express.static(path.join(__dirname, 'dist')))，这些文件就能被正确加载了。

疑问2：让NodeJS/AngularJS正常加载带/1/前缀的文件 #

如果不想修改Webpack配置，也可以通过后端路由或Monaco自身配置来适配：

方案A：修改Express路由 #

给你的Express应用添加一个额外的静态文件路由，专门处理/1/开头的请求：

// 原有的静态文件服务（处理根路径请求）
app.use(express.static(path.join(__dirname, 'dist')));
// 新增路由：把/1/开头的请求映射到dist目录
app.use('/1', express.static(path.join(__dirname, 'dist')));

这样当请求http://localhost:3000/1/3.bundle.js时，Express会自动去dist目录查找对应的文件并返回。

方案B：配置Monaco Editor的资源路径 #

Monaco允许手动指定资源加载的基础路径，在初始化Monaco前添加配置：

import * as monaco from 'monaco-editor';

// 强制Monaco从根目录加载所需资源
monaco.config({
  baseUrl: '/'
});

// 之后再初始化你的编辑器
monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello Monaco!");',
  language: 'javascript'
});

这个方法会让Monaco忽略<base>标签的设置，直接从根目录请求chunk文件。

总结 #

个人更推荐第一个方案（修改Webpack的publicPath），因为它从打包环节就统一了资源路径，避免后续出现其他路径相关的问题。

内容的提问来源于stack exchange，提问作者SoftTimur