Angular4---部署---Angular 与 Nginx的邂逅

时间:2023-03-09 03:55:06
Angular4---部署---Angular 与 Nginx的邂逅

Nginx + Angular结合操作

1.下载Nginx , 根据自己的版本下载Nginx,关于Nginx配置,请看https://www.cnblogs.com/MBirds/p/6605366.html

2.将angular项目打包,并将生成的dist文件夹发布到服务器上或本地

ng build --aot // 编译方式无要求

3.接下来配置nginx的conf文件了,打开安装目录下的conf/nginx.conf

在http节点下添加server节点,原有的server有示例可以直接copy一份

如我的配置

server {
listen 8081;
server_name localhost;
location / {
root C:/website/angular/ng-prime/dist; // 这是angular生成的dist文件夹存放的位置
index index.html;
try_files $uri $uri/ /index.html; // 注意此句,一定要加上。否则配置的子路由等无法使用
} error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

4.运行nginx,然后就可以访问了