米乐体育网站彩票 详解qy8官方网站中怎么给qy8官方网站

Angular项目中怎么给路径添加前缀？下面本篇文章给大家介绍一下qy8官方网站路径添加指定的访问前缀的方法，希望对大家有所帮助！

开发多个项目的时候，我们希望能通过指定的前缀路径去访问不同的项目。比如，通过前缀/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 一般长这样：

我们是要将 变成。但是，我们不能手动更改挂载文件。因为只要构建后的文件更改即可，所以我们可以在package.json 文件中完成这一步。只需要添加--base-href=/jimmy/ 即可，如下：

"scripts": {   "build": "ng build --base-href=/jimmy/" }

运行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 了。