Angular项目配置本地https访问

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配置成功啦

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值