当前位置: 首页 > article >正文

Mac Nginx 前端打包部署

安装homebrew

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安装Nginx

brew install nginx

 nginx相关命令

nginx启动命令:nginx

nginx -s reload  #重新加载配置
nginx -s reopen  #重启
nginx -s stop    #停止
nginx -s quit    #退出
nginx -V         #查看版本,以及配置文件地址
nginx -v         #查看版本
nginx -c filename #指定配置文件
nginx -h #帮助

启动之后,在浏览器输入http://localhost:8080  或 http://127.0.0.1:8080/地址来打开nginx

前端打包

npm run build

之后会在dist文件夹中生成代码

前端部署

前往/usr/local/etc找到nginx.conf修改配置

http {

include mime.types;

default_type application/octet-stream;


sendfile on;

keepalive_timeout 65;

#root xxx/xxx配置项目路径,不配置的话默认是html文件夹

server {

listen 28866; //项目访问端口号

server_name localhost; //项目访问地址

location / {

try_files $uri $uri/ @router;#需要指向下面的@router 否则会出现vue 的路由在nginx 中刷新出现404

index index.html index.htm;

}

location @router {

rewrite ^.*$ /index.html last;

}

location /api/ { //【/api/ 】是nginx转发标识

proxy_buffer_size 64k;

proxy_buffers 32 32k;

proxy_busy_buffers_size 128k;

proxy_pass http://localhost:8880/api/tp/; //api服务器地址

proxy_redirect default;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

}

进入/usr/local/Cellar/nginx/1.27.2/html,将打包的前端复制到 目录下

打开终端,使用nginx命令启动

打开浏览器访问 http://localhost:28866

完~

 


http://www.kler.cn/a/393308.html

相关文章:

  • redis——岁月云实战
  • 五、Swagger 介绍(Flask+Flasgger的应用)
  • 瑞吉外卖项目学习笔记(九)套餐列表分页查询、新增套餐、图片上传和下载
  • PostgreSQL CRUD 操作指南
  • 面试场景题系列:设计一致性哈希系统
  • 大型语言模型(LLMs)演化树 Large Language Models
  • Vue开发风格
  • Scala的Map集合练习
  • 关键字“退出、结束、跳过”(day13)
  • 2024 年 10 月区块链游戏研报:活跃用户与链上游戏生态的最新趋势解读
  • 飞牛私有云访问外网
  • Python发展历程·练习题 --- 《跟着小王学Python》
  • Golang | Leetcode Golang题解之第553题最优除法
  • 使用 Python 和 OpenCV 实现摄像头人脸检测并截图
  • 什么是RabbitMQ?
  • 搭建Python2和Python3虚拟环境
  • MySQL --- 自定义函数获取部门层级名称
  • 修改mysql默认字符集
  • C语言最简单的扫雷实现(解析加原码)
  • 各版本android studio下载地址
  • Vue slot 插槽 v-slot属性具名插槽
  • 足球社区管理系统 基于Spring Boot框架实现的足球社区管理系统(程序+数据库+报告)
  • 当kafka消费的数据滞后1000条时,打印告警信息
  • 在 Jupyter Notebook 中使用 Matplotlib 进行交互式可视化的教程
  • 第23节 arkts 如何实现多语言
  • 蓝桥杯每日真题 - 第7天