登录  /  注册
首页 > web前端 > js教程 > 正文

详解Angular项目中怎么给路径添加指定访问前缀

青灯夜游
发布: 2023-03-03 19:52:45
转载
1971人浏览过

angular项目中怎么给路径添加前缀?下面本篇文章给大家介绍一下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教程》】

更改 angular.json 的输出文件:

{
  "projects": {
    ...
    {
      "outputPath": "jimmy"
    }
  }
}
登录后复制

3. 更改挂载文件的 base href

默认情况下,挂载的文件 index.html 一般长这样:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jimmy</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="logo.png">
</head>
<body>
  <app-root></app-root>
</body>
</html>
登录后复制

我们是要将 <base href="/"> 变成 <base href="/jimmy/">。但是,我们不能手动更改挂载文件。因为只要构建后的文件更改即可,所以我们可以在 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 了。

更多编程相关知识,请访问:编程入门!!

以上就是详解Angular项目中怎么给路径添加指定访问前缀的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号