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访问 的相关文章