Angular v12配合Electron开发无需修改base href加载assets的方案咨询

方案1：使用Angular的APP_BASE_HREF令牌分离路由基础路径与资源基础路径 #

这个方案可以保留你修改为<base href="./">的配置来解决assets加载问题，同时完全不影响多语言路由的正常工作：

• 在app.module.ts中导入APP_BASE_HREF令牌：

  import { APP_BASE_HREF } from '@angular/common';
  

• 在NgModule的providers数组中添加配置，根据你的语言检测逻辑动态设置路由使用的基础路径：

  @NgModule({
    // 其余原有配置保持不变
    providers: [
      // 可根据实际运行场景返回对应语言前缀，比如 '/en/'、'/de/'
      { provide: APP_BASE_HREF, useValue: getCurrentLangPrefix() }
    ]
  })
  export class AppModule { }
  

该方案的核心是将Angular路由依赖的基础路径和index.html的base标签解耦，base标签仅用来处理静态资源加载路径，路由的基础路径单独通过令牌注入，不会和多语言路径前缀产生冲突。

方案2：不修改base href，调整Electron主进程的文件加载逻辑 #

如果完全不想改动原有base标签配置，可以通过Electron自定义协议解决file协议的路径解析问题：

• 在Electron主进程的ready事件中注册自定义app协议，替换默认的file协议加载逻辑：

  const { protocol, app } = require('electron');
  const path = require('path');
  
  app.whenReady().then(() => {
    protocol.registerFileProtocol('app', (request, callback) => {
      // 去掉协议前缀获取文件相对路径
      const filePath = request.url.replace('app:///', '');
      // 映射到Angular构建后dist目录下的对应文件
      callback(path.join(__dirname, 'dist', filePath));
    })
  })
  

• 调整主进程入口页面加载逻辑，使用自定义协议加载：

  mainWindow.loadURL('app:///index.html');
  

这个方案下你可以完全保留原来的<base href="/">配置，不管是assets资源加载还是多语言路由都能正常工作，不需要修改前端侧的任何原有逻辑。

方案3：修改Angular构建配置，强制所有assets资源使用相对路径 #

如果不想改动Electron侧代码，也不想调整base标签和路由配置，可以通过angular.json调整资源输出规则：

• 打开angular.json，找到projects > 你的项目名 > architect > build > options节点
• 新增如下配置项：

  {
    "deployUrl": "./",
    "outputPath": "dist/你的项目名"
  }
  

该配置会让Angular构建时自动给所有静态资源（包括assets下的文件、js、css等）的引用路径加上相对前缀，不会依赖base标签的配置解析资源路径，你的原有base标签和路由逻辑都不需要改动。

内容的提问来源于stack exchange，提问作者Raphaël Balet