Angular项目配置本地https访问

2023-11-17

Angular项目配置本地https访问


首先,先创建一个项目

d:\work\learn
λ ng new angular-https

然后cd到刚生成的项目的根目录,建立一个cert目录,用于存放我们的密钥证书等文件

cd angular-https && mkdir cert && cd cert

然后在angular.json文件中添加这行 “ssl”: true

"serve": {
   "builder": "@angular-devkit/build-angular:dev-server",
   "options": {
     "browserTarget": "angular-https:build",
     "ssl": true  // 添加这行
   },
   "configurations": {
     "production": {
       "browserTarget": "angular-https:build:production"
     }
   }
 },

运行npm start,看到open your browser on https://localhost:4200/,配置成功

d:\work\learn\angular-https (master)                                                                    
λ npm start                                                                                             
                                                                                                        
> angular-https@0.0.0 start d:\work\learn\angular-https                                                 
> ng serve                                                                                              
                                                                                                        
√ Browser application bundle generation complete.                                                       
                                                                                                        
Initial Chunk Files   | Names         |      Size                                                       
vendor.js             | vendor        |   2.66 MB                                                       
polyfills.js          | polyfills     | 484.59 kB                                                       
styles.css, styles.js | styles        | 344.16 kB                                                       
main.js               | main          |  59.53 kB                                                       
runtime.js            | runtime       |   6.15 kB                                                       
                                                                                                        
                      | Initial Total |   3.54 MB                                                       
                                                                                                        
Build at: 2021-02-26T02:09:22.988Z - Hash: cfca81690295ab59c19b - Time: 8255ms                          
                                                                                                        
** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **                                                                                              
                                                                                                        
                                                                                                        
√ Compiled successfully.                                

然后还可以配置虚拟主机,在package.json文件中添加script

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "host": "ng serve --port=80 --host=domain.com",  // 添加这句
    ...
  },

然后配置host文件,我用SwitchHosts快速打开host文件,当然你也可以跑到C:\Windows\System32\drivers\etc去添加指向
在这里插入图片描述

再运行npm run host
在这里插入图片描述
浏览器打开:https://domain.com:80/
在这里插入图片描述
https配置成功啦

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular项目配置本地https访问 的相关文章

随机推荐

  • 英特尔第十代处理器为什么不支持win7_为什么7代CPU不支持WIN7操作系统?

    说来说去还不是利益驱使 wintel联盟暗地里让客户淘汰旧的硬件旧的系统呗 区区几个驱动对英特尔来讲还不是手到擒来的事 近来市场上英特尔不是又推出了一种新的低端芯片组主板 基于22纳米打造的H310C 原生支持WIN7系统安装 这款芯片组根
  • 嵌入式(exec函数族和守护进程)

    exec 函数族 背景 fork创建进程之后 子进程和父进程执行相同的代码 但是在实际开发当中 我们希望父子进程执行不同的代码 作用 执行指定的程序 include
  • POJ 3259 Wormholes(最短路——Bellman-ford)

    A Wormholes While exploring his many farms Farmer John has discovered a number of amazing wormholes A wormhole is very p
  • Think in Java(一)

    把对象想象为 服务提供者 通常被隐藏的部分是对象内部脆弱的部分 组合和聚合 组合 使用现有的类合成新的 聚合 当组合是动态发生的时候 被称为聚合 组合经常被视为 has a 关系 例如汽车拥有引擎 在建立新类时 应该先考虑组合 因为它更加简
  • EXCEL 如何制作混合数据透视图柱形图添加折线图

    当我们制作了数据透视图 增长率什么的 需要在柱形图上增加折线图 如何做呢 工具 原料 EXCEL2007 方法 步骤 1 新建一个工作表 而后数据入局 制作一个带增长率的数据透视表 2 选中数据 而后在上方功能区找到插入菜单 在下拉选项了里
  • PM 和 PL 的区别

    工作之前只知道PM是项目经理 PL是 项目负责人 看过几本职场小说 据我理解 PM职能更多是在人事和外部资源调度方面 而PL更多在技术层面去领导下面的开发人员 小组有PL PM各一个 同事对待他们的方式给我的理解就是 PM要比PL大 工作汇
  • linux————zabbix搭建

    目录 一 zabbix的概述 二 构成 一 server 二 web页面 三 数据库 四 proxy 五 agent 三 zabbix监控对象 四 zabbix的常用术语 五 zabbix监控框架 一 zabbix client架构 二 z
  • 视频会议用户洞察白皮书

    导读 白皮书重点通过桌面研究和定量调研的方式 对疫情后视频会议行业发展现状 用户行为及需求偏好和用户付费意愿等内容展开研究 以期加深对视频会议行业及用户的了解 希望能为相关企业与资本市场提供参考意见与运营建议 关注公众号 互联互通社区 回复
  • 蓝桥杯国赛 C/C++ ABC组题解(第四届 ~ 第十二届)

    2020年第十一届蓝桥杯国赛 题号 类型 C A组 C B组 C C组 试题A 结果填空 合数个数 美丽的 2 美丽的 2 试题B 结果填空 含 2 天数 日期处理 扩散 BFS 合数个数 试题C 结果填空 本质上升序列 线性DP 阶乘约数
  • karma使用webpack的代码覆盖率测试

    前言 距离上一次博客有2个月了 倒不是没有可写东西就是提不起劲写 不说这些了这次写下我使用 karma webpack 中遇到的代码覆盖率问题 一 karma的使用 自个去搜吧 感觉讲这个的真的多 我就说一些建议 karma的测试框架改用m
  • LVGL 获取光标坐标位置

    为了方便获取物理按键输入的坐标 在仿真时直接开启打印坐标显示 获取自己想要的坐标 核心代码主要接口 indev proc press 打印光标位置 注意要先使能打印开关 LV LOG WARN pressed at x d y d proc
  • HTTP:断点续传原理图文分析

    起源 以前 用户不能使用现在这种高速的带宽访问互联网 当时 下载一个尺寸稍大的图片或文件就已经很吃力了 如果下载过程中遇到网络中断的情况 那就必须重头开始 一 获取部分内容 在HTTP 1 1中 为了解决上述问题 需要一种可恢复的机制 所谓
  • C++ Web服务器 - 用户登录(三)

    newobj跨平台开发框架 https github com Liuccysdgg newobj 本片着重介绍 MYSQL连接池 HTTP静态文件响应 部分JS等 效果演示 一 MYSQL连接池 如果每次业务请求进来时去创建mysql连接并
  • Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime问题解决

    Node Sass does not yet support your current environment Windows 64 bit with Unsupported runtime问题解决 运行原先vue程序时 npm run d
  • Typescript、VUE3的相关介绍

    一 Typescript 1 TypeScript 的由来 TypeScript 是由微软开发的一款开源的编程语言 TypeScript 是 Javascript 的超集 遵循最新的 ES6 ES5 规范 TypeScript 扩展了 Ja
  • 动态规划问题——最长上升子序列(LIS)(一)

    原文转载自我的博客benym cn 推荐链接 动态规划问题 最长上升子序列 LIS 二 动态规划问题 最长上升子序列 LIS 三 如 求 2 7 1 5 6 4 3 8 9 的最长上升子序列 我们定义d i i 1 n 来表示前i个数以A
  • chatgpt赋能Python-python2_7如何安装

    Python 2 7如何安装 Python 2 7是一个广泛使用的Python版本 其可以在Windows和Linux上安装 本文将介绍Python 2 7如何安装 并提供相关步骤和指南 下载Python 2 7 首先 您需要下载Pytho
  • Python for循环嵌套

    视频版教程 Python3零基础7天入门实战视频教程 在有复杂应用的时候 我们可以通过for循环的嵌套来实现 比如打印二维的行列 这里先学习下range 方法 获取一个数字序列 案例 range stop 返回0到stop 1的数字序列 f
  • SQL 通配符

    在 SQL 中 通配符与 SQL LIKE 操作符一起使用 SQL 通配符用于搜索表中的数据 在 SQL 中 可使用以下通配符 通配符 描述 替代 0 个或多个字符 替代一个字符 charlist 字符列中的任何单一字符 charlist
  • Angular项目配置本地https访问

    Angular项目配置本地https访问 首先 先创建一个项目 d work learn ng new angular https 然后cd到刚生成的项目的根目录 建立一个cert目录 用于存放我们的密钥证书等文件 cd angular h