这篇“Angular项目中如何给路径添加指定访问前缀”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Angular项目中如何给路径添加指定访问前缀”文章吧。
开发多个项目的时候，我们希望能通过指定的前缀路径去访问不同的项目。比如，通过前缀
去访问项目
/projectA/
；通过前缀
A
去访问项目
/projectB/
。我们应该怎么设置呢？
B
这里使用的框架是
，
Angular
"@angular/core": "~12.1.0"
更改项目前缀
假设我们添加的前缀为
/jimmy/
1. 更改路由前缀
在
文件中添加
app.module.ts
：
APP_BASE_HREF
import { APP_BASE_HREF } from '@angular/common';@NgModule({providers: [{provide: APP_BASE_HREF,useValue: "/jimmy/"}]})
2. 更改打包的文件
这一步非必需，我们这里只是统一一下名称为
而已
jimmy
更改
的输出文件：
angular.json
{"projects": {...{"outputPath": "jimmy"}}}
3. 更改挂载文件的 base href
默认情况下，挂载的文件
一般长这样：
index.html
<!doctype html><html><head><meta charset="utf-8"><title>Jimmy</title><base href="https://www.19jp.com">
我们是要将
变成
<base href="https://www.19jp.com">
。但是，我们不能手动更改挂载文件。因为只要构建后的文件更改即可，所以我们可以在
<base href="https://www.19jp.com">
文件中完成这一步。只需要添加
package.json
即可，如下：
--base-href="https://www.19jp.com">
"scripts": {"build": "ng build --base-href="https://www.19jp.com">
运行
打包后得到的文件夹
npm run build
下的
jimmy
文件中的
index.html
标签自然会更改。
base
至此，我们已经更改完了访问的项目前缀，那么我们要部署到服务器上进行访问，是要怎么做呢？
部署项目
这里假设我已经将打包后的
资源上传到了服务器，并且用
jimmy
作为代理。
nginx
本项目是个 SPA 项目。MPA 项目的讲解会放在下一篇文章，相关项目使用技术是
，敬请期待
next.js
这里，我们需要更改
中的
nginx.config
字段:
server
server {listen 80 default_server;root /usr/share/nginx/fe/; // 打包的文件存放的位置location /jimmy/ {index index.html index.htm;try_files $uri $uri/ /jimmy/index.html;}}
执行
使得配置生效。通过
nginx -s reload
就可以访问到项目
http://domain.com/jimmy/index.html
了。
jimmy
以上就是Angular项目中如何给路径添加指定访问前缀的详细内容，更多关于Angular项目中如何给路径添加指定访问前缀的资料请关注九品源码其它相关文章！