前端项目打包部署流程j

1.打包前端项目(运行build这个文件)

2.打包完成后,控制台如下所示:(没有报错即代表成功)

3.左侧出现dist文件夹

4.准备好我们下载的nginx(可以到官网下载一个),然后在一个没有中文路径下的文件夹里面解压。

5.在继承终端内打开我们的项目,找到前面打包好生成的dist目录,把里面的内容全部复制下来,然后粘贴到nginx里面的html目录,这就完成项目的部署了。

6.可能会遇到的问题,nginx无法访问后端写的业务逻辑,这是因为打包的项目没有包括我们原来的代理的配置,可以修改nginx的配置来解决这个问题(我的后端端口是8080,如果不一致要记得修改)


#user  nobody;
worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       80;server_name  localhost;client_max_body_size 10m;location / {root   html;index  index.html index.htm;try_files $uri $uri/ /index.html;}location ^~ /api/ {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8080;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

        之后我们在此处进入命令窗口,输入nginx.exe -s reload,就可以解决这个问题啦,

打开我们要访问的目的地址,可以看到成功访问到了.ok

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/905558.shtml

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

相关文章

Go语言标识符

文章目录 标识符的组成规则Go语言关键字预定义标识符标识符命名惯例 特殊标识符标识符访问权限控制 在Go语言中,标识符(Identifier)是用来命名变量、函数、类型、常量等程序实体的名称。 标识符的组成规则 1、必须以字母或下划线(_)开头: 字母包括Unico…

CST软件对OPERACST软件联合仿真汽车无线充电站对人体的影响

上海又收紧了新能源车的免费上牌政策。所以年前一些伙伴和我探讨过买新能源汽车的问题,小伙伴们基本纠结的点是买插电还是纯电?我个人是很抗拒新能源车的,也开过坐过。个人有几个观点: 溢价过高,不保值。实际并不环保…

吴恩达机器学习笔记:多变量梯度下降

1.多维特征 之前我们探讨了单变量/特征的回归模型,现在我们对房价模型增加更多的特征,例如房间数楼层等,构成一个含有多个变量的模型,模型中的特征为 ( x 1 , x 2 , x 3... x n ) &…

【Linux Nano Vim快捷键大全】

Nano 快捷键大全 常用高频操作 功能描述快捷键组合替代按键/备注使用频率显示帮助CtrlGF1高保存文件CtrlOF3高退出编辑器CtrlXF2高剪切当前行CtrlKF9高粘贴内容CtrlUF10高搜索文本CtrlWF6高替换文本Ctrl\AltR高撤销操作AltU无中重做操作AltE无中跳转到行号Ctrl_AltG中插入文件…

uniapp vue 沉浸式窗体如何获取并排除外部手机浏览器底部菜单栏工具栏高度

这个问题可以简称为:uniapp vue 获取可视窗口高度 第一种方案,只改变css样式 /* 不考虑浏览器UI的最小视口高度 */ .element {height: 100svh; /* small viewport height */ }/* 考虑浏览器UI变化的动态视口高度 */ .element {height: 100dvh; /* dyna…

React Native告别图标体积大手动更换慢的噩梦:让图标更新像修改文字一样简单

写在前面:凌晨三点的图标战争 “所有图标都要换成圆角风格,明天上线!”——产品经理这条消息弹出时,我的保温杯差点从手中滑落。扫了一眼项目中的347个图标文件,我知道今晚又是个不眠夜。但就在绝望之际,同事发来一个GIF:他只是在终端输入了iconfont-rn --update,所有…

自然语言处理与BI融合实战:ChatBI动态语义解析技术架构剖析

在数字经济时代,数据已成为企业核心竞争力的关键要素。如何高效挖掘数据价值、实现智能化决策,成为企业数字化转型的核心命题。传统商业智能(BI)工具虽具备强大的数据处理能力,但其技术门槛高、交互方式复杂等局限性日…

鸿蒙OSUniApp开发支持多语言的国际化组件#三方框架 #Uniapp

使用UniApp开发支持多语言的国际化组件 在全球化的今天,一个优秀的应用往往需要支持多种语言以满足不同地区用户的需求。本文将详细讲解如何在UniApp框架中实现一套完整的国际化解决方案,从而轻松实现多语言切换功能。 前言 去年接手了一个面向国际市场…

SpringBoot的外部化配置

一、什么是外部化配置 外部化配置是指把应用程序中各种可配置的参数、属性等信息,从代码内部提取出来,放置在外部的配置文件、数据库或配置中心等地方(比如使用.properties、.yml 或.xml 等格式的文件)进行管理。提高应用程序的可…

SQL中联表的运用

当出现要大量数据去查询时,不要一个个去SQL查询,应该要批量的去查询。 def batch_cavity_query(self, fuseids): “”“批量查询cavity信息”“” if not fuseids: return {} # 创建临时表批量查询 try:# 创建临时表self.cursor.execute("CREATE …

React面试常问问题详解

以下是30个React面试中常见的问题及简要解析,涵盖基础概念、核心原理、性能优化、Hooks、状态管理等方面,适用于初中高级开发者准备面试时参考: 一、React 基础与核心概念 React 是什么? React 是由 Facebook 开发的用于构建用户界…

【vite好用的配置】自动导入组件、vue中的hook、路径解析、打包配置、本地运行反向代理配置

前言 之前出了一篇自己搭建 后台管理系统的文章,今天顺便把vite配置,涉及到的一些给大家分享吧。 按需食用哈。 文章目录 前言一、 自动导入vue中的hook、ref等1. 安装插件2. 配置 Vite(vite.config.ts 或 vite.config.js)1&…

思科(Cisco ASA/Firepower)、华三(H3C)、华为(Huawei USG)防火墙 的基础配置

以下是针对 思科(Cisco ASA/Firepower)、华三(H3C)、华为(Huawei USG)防火墙 的基础配置指南,涵盖 区域划分、安全策略、NAT、路由 等核心功能。配置示例基于通用场景,实际部署时需根…

mac latex vscode 配置

mac latex vscode 配置 安装mactex.pkg 这里有个快速下载的镜像 https://mirrors.aliyun.com/CTAN/systems/mac/mactex/ 可以检查是否将 PATH 写入 export PATH"/Library/TeX/texbin:$PATH"vscode 下载插件 Latex Workshop 在配置文件 settings.json 中输入如下的…

AI日报 · 2025年5月14日|Android 生态大型更新与多端 Gemini 集成

1、Google “Android Show: I/O Edition” 汇总:设计、安全、Gemini 三线并进 北京时间 5 月 14 日凌晨(原文标注 5 月 13 日 PDT),Google 在 I/O 前夕举办的 Android Show 一口气公布四大方向更新:① Mater…

MySQL入门指南:环境搭建与服务管理全流程

引言 各位开发者朋友们好!今天我们将开启MySQL的学习之旅 🌟 作为世界上最流行的开源关系型数据库,MySQL在Web应用、企业系统等领域占据着举足轻重的地位。无论你是刚入行的新手,还是想系统复习的老鸟,这篇教程都将为…

LLM 论文精读(四)LLM Post-Training: A Deep Dive into Reasoning Large Language Models

这是一篇2025年发表在arxiv中的LLM领域论文,是一篇非常全面的综述类论文,介绍了当前主流的强化学习方法在LLM上的应用,文章内容比较长,但建议LLM方面的从业人员反复认真阅读。 写在最前面 为了方便你的阅读,以下几点的…

从规则驱动到深度学习:自然语言生成的进化之路

自然语言生成技术正经历着人类文明史上最剧烈的认知革命。这项起源于图灵测试的技术,已经从简单的符号操作演变为具备语义理解能力的智能系统。当我们回溯其发展历程,看到的不仅是算法模型的迭代更新,更是一部人类认知自我突破的史诗。这场革…

如何实现Flask应用程序的安全性

在 Flask 应用中,确保安全性非常关键,尤其是当你将应用部署到公网环境中时。Flask 本身虽然轻量,但通过组合安全策略、扩展库和最佳实践,可以构建一个非常安全的 Web 应用。 一、常见 Flask 安全风险(必须防护) 安全问题 简要说明 CSRF(跨站请求伪造) 恶意网站诱导用户…

Chrome安装最新vue-devtool插件

本vue-devtool版本是官方的 v7.6.8版本,兼容性好、功能齐全且稳定。 操作步骤: 方法一: 打开谷歌浏览器 --> 右上角三个点 --> 扩展程序 --> 管理扩展程序 --> 加载已解压的扩展程序, 然后选择解压后的文件夹即可。…