angular项目项目线上图片路由配置.md 3.3 KB
以下是根据我们之前的讨论整理的Markdown文档，它详细描述了如何配置Angular项目以支持子路径部署，并确保CSS文件和其中引用的资源（如图片）能够正确加载。
# Angular 子路径部署与 CSS 资源路径处理
## 概述
本文档指导如何在Angular项目中设置`--base-href`参数来适应子路径部署，并确保所有静态资源（包括CSS文件内引用的图片等资源）都能正确加载。我们将通过具体的示例展示如何实现这一目标。
## 目录结构
dist/nova-stv/browser/ ├── assets/ │ ├── img/ │ │ └── background.png │ └── style/ │ └── variables.css ├── index.html ├── main.js └── ...
## 步骤指南
### 1. 设置 baseHref 参数构建项目
使用以下命令构建你的Angular项目：
bash ng build --configuration=production --output-path=dist/nova-stv/browser --base-href=/dev/stv/
这将确保所有内部资源引用都会自动加上前缀 `/dev/stv/`。
### 2. 修改 angular.json 配置
确保在`angular.json`中为生产环境配置正确的`styles`数组：
json "production": { "styles": [
{
"input": "projects/nova-stv/src/assets/style/variables.prod.css",
"inject": true,
"bundleName": "variables"
},
...
] }
对于开发环境，你可以使用不同的CSS文件或相同的相对路径。
### 3. 动态加载 CSS 文件
在`main.ts`中动态加载CSS文件时，请确保添加正确的`baseHref`：
typescript import {environment} from './environments/environment'; import {bootstrapApplication} from '@angular/platform-browser'; import {appConfig} from './app/app.config'; import {AppComponent} from './app/app.component';
// 获取 baseHref（即 /dev/stv/）
const baseHref = (window as any).app_base_href || '/dev/stv/';
const cssFileName = environment.production ? 'variables.production.css' : 'variables.css';
const head = document.head;
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = ${baseHref}assets/style/${cssFileName};
head.appendChild(linkElement);
// 等待样式加载完成后再启动应用（可选，但推荐） linkElement.onload = () => { bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
};
linkElement.onerror = () => {
console.error(Failed to load CSS file: ${cssFileName});
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
};
### 4. 处理 CSS 中的资源引用
为了保证CSS中的资源引用也包含正确的`baseHref`，你需要调整CSS变量定义。例如，在`variables.css`中：
#### 使用相对路径（推荐）
css :root { --asset-path: "assets"; --background-url: url("assets/img/background.png"); }
这样可以确保资源请求会基于当前页面的路径进行解析，从而避免绝对路径导致的问题。
### 5. HTML 文件中的资源引用
确保所有的HTML文件中的资源引用也是相对路径，例如：
html
environment.ts
// src/environments/environment.prod.ts
export const environment = { production: true, // 其他生产环境配置 };
```