如何配置Aurelia应用在本地虚拟目录http://localhost:8080/demos运行

兄弟，我之前在Aurelia+Webpack部署虚拟目录的时候也踩过一模一样的坑——静态资源404+路由报错，核心就是没把Webpack的路径配置和Aurelia的base href对应上。咱们一步步来解决：

首先得让Webpack明确你的虚拟目录路径，这几个配置是关键：

• output.publicPath：必须设置为'/demos/'（注意首尾的斜杠！Webpack会用这个路径拼接所有静态资源的URL）
• devServer.historyApiFallback：配置路由 fallback 入口，解决刷新页面时的404问题
• Webpack 5+ 已用devServer.static替代旧版contentBase，要同步设置publicPath和虚拟目录一致

给你个可直接参考的配置片段：

const path = require('path');

module.exports = {
  // ...其他Webpack配置（entry、module.rules等）
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/demos/' // 核心：指定虚拟目录路径，带首尾斜杠
  },
  devServer: {
    port: 8080,
    static: {
      directory: path.resolve(__dirname, 'src'), // 开发模式指向源码目录，生产模式可换成dist
      publicPath: '/demos/' // 和output.publicPath完全一致
    },
    historyApiFallback: {
      index: '/demos/index.html' // 让所有路由请求都指向虚拟目录下的index.html
    }
  }
};

这一步很容易被忽略！在你的index.html的<head>最顶部添加<base href="/demos/">标签，确保Aurelia的路由、资源加载都基于这个基准路径：

<!DOCTYPE html>
<html>
<head>
  <base href="/demos/"> <!-- 必须放在最前面，在加载任何脚本/样式之前 -->
  <meta charset="UTF-8">
  <title>My Aurelia App</title>
</head>
<body aurelia-app="main">
</body>
</html>

另外，路由配置里不要给路由路径加/demos/前缀，因为base href已经帮你处理了。比如：

// 路由配置示例
export class AppRouterConfiguration extends RouterConfiguration {
  configure(router) {
    router.title = 'My App';
    this.map([
      { route: '', name: 'home', moduleId: 'home/index' }, // 对应 /demos/
      { route: 'about', name: 'about', moduleId: 'about/index' } // 对应 /demos/about
    ]);
  }
}

启动Webpack Dev Server后，访问http://localhost:8080/demos，检查两个关键点：

• 打开浏览器控制台，看静态资源（JS、CSS、图片）的请求URL是否是http://localhost:8080/demos/xxx.js格式，是的话说明路径配置生效
• 点击路由链接或者刷新页面，不会出现404错误，说明路由 fallback 配置正确

如果是生产构建，打包后的dist目录要部署到服务器的demos虚拟目录下，比如：

• Nginx里配置location规则，把/demos/的请求映射到dist文件夹
• IIS里创建名为demos的虚拟应用，指向dist目录

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