Mac Nginx 前端打包部署

news2024/11/14 8:21:43

安装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.coloradmin.cn/o/2240040.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

小试银河麒麟系统OCR软件

0 前言 今天在国产电脑上办公,需要从一些PDF文件中复制文字内容,但是这些PDF文件是图片转换生成的,不支持文字选择和复制,除了手工输入,我们还可以使用OCR。 1 什么是OCR OCR (Optical Character Recogni…

选择主动孤独,亦可以成长和放松

有的人热衷于喧嚣,享受来自社交场合的灯火辉煌,将欢声笑语作为心灵的慰藉。有的人则偏爱那份宁静,更愿意在青灯古巷间徘徊,在山川湖海间独行,以一杯茶、一卷书、一段旅程与自我对话。每个人以不同的方式诠释活着的意义…

Django 外键引用另一个表中的多个字段

在 Django 中,外键(ForeignKey)通常只引用另一张表的一个字段,比如一个主键或一个唯一标识字段。然而,如果我们需要让一个外键引用另一张表中的多个字段,通常有以下几种方法来实现这种关系。 1、问题背景 …

MyBatis从入门到进阶

目录 MyBatis入门1、创建项目、数据准备2、数据库配置3、编写持久层代码单元测试打印日志 基本操作查询数据插入数据删除数据更新数据 MyBatis - xml插入数据更新数据删除数据查询数据#{}与${}SQL注入排序like查询 MyBatis进阶if标签trim标签where标签set标签foreach标签sql标签…

【JavaWeb】JavaWeb入门之XML详解

目录 1.XML介绍 1.1.XML概述 1.1.1.什么是XML 1.1.2.XML的作用 1.1.3.XML与HTML的比较 1.1.4.XML和properties(属性文件)比较 1.1.5.W3C组织 1.2.XML语法概述 1.2.1.XML文档展示 1.2.2.XML文档的组成部分 1.3.XML文档声明 1.3.1.什么是XML文…

wordcloud库基本介绍

文章目录 wordcloud库概述wordcloud库的安装 wordcloud库使用说明配置对象参数 wordcloud应用实例实例: 政府工作报告词云 wordcloud库概述 wordcloud是优秀的词云展示第三方库 词云以词语为基本单位,更加直观和艺术地展示文本 wordcloud库的安装 (cmd命令行) pip install …

VMware和CentOS 7.6 Linux操作系统的安装使用

1. 安装VMware 安装VMware之前,有些电脑是需要去BIOS里修改设置开启cpu虚拟化设备支持才能安装。如果运气不好在安装过程中安装不了的话就自行百度吧。 打开 VMware 的官网: https://www.vmware.com/ 点击 product,往下滑找到 see desktop hypeerviso…

LLM在Transformer上的改动

LLM在Transformer上的改动 1.multi-head共享1.1BERT的逻辑1.2multi-head共享 2.attention的前后网络2.1传统Transformer:2.2GPTJ结构: 3.归一化层的位置(LayerNorm)4.归一化层函数的选择4.1LayerNorm4.2RMSNorm 3.激活函数4.LLama…

解决SpringBoot3的Validated依赖实现自定义注解失效问题

我们引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency> Validated实现自定义注解 我们首先看看自定义注解里面&#xff0c;用到的注解的包 我们…

当微软windows的记事本被AI加持

1985年&#xff0c;微软发布了Windows 1.0&#xff0c;推出了一款革命性的产品&#xff1a;记事本&#xff08;Notepad&#xff09;。这款软件旨在鼓励使用一种未来主义的新设备——鼠标&#xff0c;并让人们可以不依赖VI等键盘工具就能书写文本和编写代码。记事本因其简洁和高…

前端常用布局模板39套,纯CSS实现布局

前端常用布局模板39套&#xff0c;纯CSS实现布局 说明 写博客、官网、管理后台都可以参考以下布局模板&#xff0c;实现模板布局的方式包含&#xff1a;flex、CSS、HTML5、Layout。 不需要下载积分&#xff0c;没有特殊库引用&#xff0c;不用安装任何插件&#xff0c;打开资源…

微服务day07

Elasticsearch 需要安装elasticsearch和Kibana&#xff0c;应为Kibana中有一套控制台可以方便的进行操作。 安装elasticsearch 使用docker命令安装&#xff1a; docker run -d \ --name es \-e "ES_JAVA_OPTS-Xms512m -Xmx512m" \ //设置他的运行内存空间&#x…

java常用工具介绍

1. 集成开发环境&#xff08;IDE&#xff09;&#xff1a; • Eclipse&#xff1a;一个开放源代码的、基于Java的可扩展开发平台。它提供了一个框架和一组服务&#xff0c;用于通过插件组件构建开发环境。Eclipse 还包括用于Java开发的工具&#xff08;Java Development Tools,…

C++入门基础知识148—【关于C++ 二元运算符重载】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 二元运算符重载的相关内容&#xff01…

黑马智数Day7

获取行车管理计费规则列表 封装接口 export function getRuleListAPI(params) {return request({url: parking/rule/list,params}) } 获取并渲染数据 import { getRuleListAPI } from /apis/carmounted() {this.getRuleList() }methods: {// 获取规则列表async getRuleList(…

NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍

一.前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本 1. NodeJS的安装 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环 境&#xff0c;可以使 JavaScript 运行在服务…

Anolis8.2系统中搭建python环境

文章目录 安装依赖项依赖项介绍 下载python源码包安装python源码包 安装依赖项 [rootPython ~]# dnf install -y gcc make zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel xz-devel libffi-devel uuid-devel libnsl2-d…

51c自动驾驶~合集10

我自己的原文哦~ https://blog.51cto.com/whaosoft/11638131 #端到端任务 说起端到端&#xff0c;每个从业者可能都觉得会是下一代自动驾驶量产方案绕不开的点&#xff01;特斯拉率先吹响了方案更新的号角&#xff0c;无论是完全端到端&#xff0c;还是专注于planner的模型&a…

基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统

项目名称&#xff1a;基于PythonDjangoVue3MySQL实现的前后端分离商场车辆管理系统 技术栈 开发工具&#xff1a;PyCharm、Visual Studio Code (VSCode)运行环境&#xff1a;Python 3.10、MySQL 8.0、Node.js 18技术框架&#xff1a;Django 5、Vue 3.4、Ant-Design-Vue 4.12 …

JAVA后端生成图片滑块验证码 springboot+js完整案例

前言 现在大部分网部都是图片滑块验证码&#xff0c;这个得要与后端联动起来才是确保接口安全性 通过我们系统在发送手机短息时都会选进行滑块验证&#xff0c;但是我们要保证发送短息接口的全安&#xff0c;具体路思如下 那么这个滑块的必须是与后端交互才能保证安全性&…