Vue3学习笔记<->nginx部署vue项目(3)

安装nginx

  vue项目通常部署到nginx上,所以先安装一个nginx。为了方便安装的是windows版nginx,解压就能用。
项目参考上一篇文章《Vue3学习笔记<->创建第一个vue项目》《Vue3学习笔记<->创建第一个vue项目》
nginx下载地址:windows版nginx下载地址

windows版nginx下载
  找到目录存放,并解压
在这里插入图片描述
  双击“nginx.exe”启动
在这里插入图片描述

  关闭nginx,打开"任务管理器",找到“nginx.exe(32 位)”,结束任务。点第一个如果没反应,换第二个点。停掉一个之后,再停另一个。这是我使用的经验,不知道原因。。。
在这里插入图片描述

项目编译

  编译的项目就使用前面文档里的项目。idea打开项目,并进入命令行。如果当前目录不是项目目录,切换项目目录
在这里插入图片描述
  执行编译命令:yarn build 或yarn run build
在这里插入图片描述
  查看打包结果
在这里插入图片描述

部署项目到nginx

  1. 打开nginx安装目录,找到html目录
    在这里插入图片描述

  2. 把dist目录整个复制到html目录下
    在这里插入图片描述
    在这里插入图片描述

  3. 打开nginx安装目录下的conf目录,找到文件“nginx.conf”
    在这里插入图片描述

  4. 打开nginx.conf文件,并编辑内容,
    在这里插入图片描述

  5. 启动nginx,并通过地址"http://localhost:8888", 在浏览器中访问应用。出现一下界面表示部署成功
    在这里插入图片描述

  6. 点击页面上的“count is 0” 按钮,可以看到count在自增

在这里插入图片描述

总结一下。。。

  这里主要说的是部署流程,实际项目部署过程要复杂的多,比如nginx.conf的配置文件中,就需要配置很多内容。实际部署项目的经验不是看几遍文档可以学的了,这个经验要从实际操作的过程中获取。。。

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

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

相关文章

uniapp启动页面鉴权页面闪烁问题

在使用uni-app开发app 打包完成后如果没有token,那么就在onLaunch生命周期里面判断用户是否登录并跳转至登录页。 但是在app中页面会先进入首页然后再跳转至登录页,十分影响体验。 处理方法: 使用plus.navigator.closeSplashscreen() 官网…

SpringBoot学习05-[SpringBoot的嵌入式Servlet容器]

SpringBoot的嵌入式Servlet容器 嵌入式Servlet容器servlet容器-嵌入式servlet容器配置修改通过全局配置文件修改修改添加实现了WebServerFactoryCustomizer接口的bean来进行修改 servlet容器-注册servlet三大组件 嵌入式Servlet容器 SpringBoot包含对嵌入式Tomcat、Jetty、Und…

嵌入式学习——硬件(ARM体系架构)——day51

1. S3C2440基础知识——一条指令四个字节 1.1 定义 S3C2440 是三星(Samsung)公司设计的一款基于 ARM920T 核心的微处理器,广泛应用于嵌入式系统中,属于三星的 S3C24xx 系列。 1.2 处理器核心 ARM920T:基于 ARM v5T …

某配送平台未授权访问和弱口令(附赠nuclei默认密码验证脚本)

找到一个某src的子站,通过信息收集插件,发现ZABBIX-监控系统,可以日一下 使用谷歌搜索历史漏洞:zabbix漏洞 通过目录扫描扫描到后台,谷歌搜索一下有没有默认弱口令 成功进去了,挖洞就是这么简单 搜索文章还…

探秘Java版ERP管理系统源码:基于Spring Cloud Alibaba与Spring Boot的微服务架构解析

数字化时代的智能ERP管理系统:引领企业高效管理与创新发展 随着数字化浪潮的席卷,现代企业对于高效、稳定、易于扩展的管理系统需求愈发迫切。为了满足这一需求,我们倾力打造了一款基于Java技术的企业级资源规划(ERP)…

【ONE·Linux || 高级IO(一)】

总言 主要内容:介绍五种IO模型的基本概念、学习IO多路转接(select、poll编程模型)。       文章目录 总言1、问题引入1.1、网络通信与IO1.2、五种IO模型1.2.1、举例引入1.2.2、IO模型具体含义介绍1.2.2.1、阻塞式IO1.2.2.2、非阻塞轮询检…

第三节:如何理解Spring的两个特性IOC和AOP(自学Spring boot 3.x第一天)

大家好,我是网创有方,接下来教大家如何理解Spring的两个特性IOC和AOP。本节有点难,大家多理解。 IOC(控制反转) 定义与核心思想: IOC,全称Inversion of Control,即控制反转。 其核…

把飞书云文档变成HTML邮件:问题挑战与解决历程

一、背景 云文档转HTML邮件 基于公司内部的飞书办公套件,早在去年6月,我们就建设了将飞书云文档转译成HTML邮件的能力,方便同学们在编写邮件文档和发送邮件时,都能有较好的体验和较高的效率。 当下问题 要被邮件客户端识别&am…

防止跨站脚本攻击XSS之Antisamy

目录 一、什么是跨站脚本攻击(XSS) 二、通常有哪些解决方案 三、常见的XSS攻击例子有哪些 3.1 存储型XSS攻击(黑产恶意截流,跳转不法网站) 3.2反射型XSS攻击: 四、什么是跨站请求伪造? 五…

这是我见过的大模型 RAG 优化方案与实践最全总结了

暑期实习基本结束了,校招即将开启。 不同以往的是,当前职场环境已不再是那个双向奔赴时代了。求职者在变多,HC 在变少,岗位要求还更高了。提前准备才是完全之策。 最近,我们又陆续整理了很多大厂的面试题&#xff0c…

软件工程 例题

用例图 1. 某个学生成绩管理系统的部分参与者和用例总结如下。 教务管理人员: 登录系统教师、学生名单管理学期教学计划管理成绩管理。课程分配,每次课程分配时都必须打印任课通知书 学生: 登录系统选课。 教师: 登录系统成绩管理,并…

Query Rewriting for Retrieval-Augmented Large Language Models

文章目录 题目摘要方法实验 题目 检索增强大语言模型的查询重写 论文地址:https://arxiv.org/abs/2305.14283 项目地址:https://github.com/xbmxb/RAG-query-rewriting 摘要 大语言模型(LLM)在检索--然后阅读(retriev…

百度智能云升级:接入33个大模型,Llama 2引领创新,103个Prompt模板上线

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的…

鉴源实验室·基于MQTT协议的模糊测试研究

作者 | 张渊策 上海控安可信软件创新研究院工控网络安全组 来源 | 鉴源实验室 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 随着物联网技术的快速发展,越来越多的设备加入到互联网中,形成了庞大的物联网系统。这些设备之间的通信…

2024年每个月有哪些数学建模和数学挖掘竞赛?

文章目录 2024年每个月有哪些竞赛?2024年32个数学建模和数据挖掘竞赛重磅来袭!!!2024年数学建模和数学挖掘竞赛时间目录汇总数学建模助手使用一月二月三月四月五月六月七月八月九月十月十一月十二月 原文:https://blog…

最新!最全!元启发优化算法215个测试函数综述!【免费获取论文】

目录 1.摘要2.主要内容3.参考文献4.文章获取 1.摘要 这篇综述论文旨在利用对不同基准测试函数的研究,评估元启发优化算法(Metaheuristic optimization algorithms, MH)的性能。MH的性能是通过不同的数学基准测试函数和各种实际工程设计问题来评估,这些基…

[数据集][目标检测]睡岗检测数据集VOC+YOLO格式3290张4类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):3316 标注数量(xml文件个数):3316 标注数量(txt文件个数):3316 标注…

stm32-hal库(5)--usart串口通信三种模式(主从通信)(关于通信失败和串口不断发送数据问题的解决)

问题: 最近发现,stm32cubemx最新版本f1系列的hal库(1.85版本)生成的hal库,其中stm32f1xx_hal_uart.c的库文件中,其串口发送接收存在一些问题: 1.没有使用 __HAL_LOCK 和 __HAL_UNLOCK 宏&…

开源大模型RAG企业本地知识库问答机器人-ChatWiki

ChatWiki ChatWiki是一款开源的知识库 AI 问答系统。系统基于大语言模型(LLM )和检索增强生成(RAG)技术构建,提供开箱即用的数据处理、模型调用等能力,可以帮助企业快速搭建自己的知识库 AI 问答系统。 开…

vue使用glide.js实现轮播图(可直接复制使用)

效果图 可以实现自动轮播&#xff0c;3种切换方式&#xff1a;直接滑动图片、点击两侧按钮、点击底部按钮 体验链接:http://website.livequeen.top 实现 一、引入依赖 1、控制台引入依赖 npm install glidejs/glide 2、在css中引用 <style scoped> import glidejs/g…