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

安装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的配置文件中,就需要配置很多内容。实际部署项目的经验不是看几遍文档可以学的了,这个经验要从实际操作的过程中获取。。。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣随机一题 6/28 数组/矩阵

📝个人主页🌹:誓则盟约⏩收录专栏⏪:IT 竞赛🤡往期回顾🤡:6/27 每日一题关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞&#x1f44d…

最新AI智能聊天对话问答系统源码(图文搭建部署教程)+AI绘画,文生图,TTS语音识别输入,文档分析

一、人工智能语言模型和AI绘画在多个领域广泛应用 人工智能语言模型和AI绘画在多个领域都有广泛的应用。以下是一些它们的主要用处: 人工智能语言模型 内容生成 写作辅助:帮助撰写文章、博客、报告、剧本等。 代码生成:自动生成或补全代码&…

Arduino - Keypad 键盘

Arduino - Keypad Arduino - Keypad The keypad is widely used in many devices such as door lock, ATM, calculator… 键盘广泛应用于门锁、ATM、计算器等多种设备中。 In this tutorial, we will learn: 在本教程中,我们将学习: How to use key…

Kompas AI用户体验与界面设计对比

一、引言 在人工智能(AI)产品领域,用户体验(UX)和界面设计(UI)是衡量产品成功与否的两个关键指标。一个优秀的AI产品不仅需要具备强大的功能,还需要提供流畅、直观且富有吸引力的用…

还不会写WorkFlow?“讲课“即工作流,摩根大通用一段Prompt诱导LLMs自主生成

随着各种自动生成Prompt的工具被开源,Prompt Engineer的生存空间也在不断被压缩,一个明显的转变已经出现:要想在ALL IN AI的状态下生存下去,你要能从Prompt Engineer切换成WorkFlow Engineer。而WorkFlow领域的竞争也是非常激烈的…

CSS 核心知识点 - grid

思维导图 参考网址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout 一、什么是 grid? CSS Grid布局是在CSS3规范中引入的一种新的布局方式,旨在解决传统布局方法(如浮动、定位、表格布局)存在的许多问题。C…

【STM32修改串口波特率】

STM32微控制器中的串口波特率调整通常涉及到USART(通用同步接收器/发送器)模块的配置。USART模块提供了多个寄存器来设置波特率,其中关键的寄存器包括BRR(波特率寄存器)和USART_CR1(控制寄存器1&#xff09…

【数学建模】——【python库】——【Pandas学习】

专栏:数学建模学习笔记 pycharm专业版免费激活教程见资源,私信我给你发 python相关库的安装:pandas,numpy,matplotlib,statsmodels 总篇:【数学建模】—【新手小白到国奖选手】—【学习路线】 第一卷:【数学…

推荐系统中冷启动环节的设计实现

推荐系统中的冷启动分为物料冷启动和用户冷启动。用户冷启动主要是针对新用户,但有时候也用于低活用户拉活。物料冷启动主要是让优质物料得到快速下发,让模型可以迅速捕获到用户对该物料的关注。本文将详细讲解用户冷启动和物料冷启动。 1、用户冷启动 用…

SAMformer:通过锐度感知最小化和通道注意力解锁变换器在时间序列预测中的潜力

目录 摘要1. 引言当前方法的局限性变换器的可训练性我们贡献的总结 2. 提出的方法符号说明2.1 问题设置2.2 激励示例命题2.1(最优解的存在性) 2.3 变换器的损失景观现有的解决方案 2.4. SAMformer:集成所有方法 3. 实验3.1 主要收获 摘要 基…

【Linux系统编程】进程控制(创建、退出、等待、替换)

目录 再聊进程创建 进程终止 进程等待 进程程序替换 再聊进程创建 初识进程创建 关于进程创建,这里只会说结论,在上面这篇文章中对进程创建进行了比较详细的阐述,而接下来要介绍的,都是基于上文说过的来展开的 一些较为重要…

98%企业竟存N日漏洞超5年,新漏洞利用攻击时长极速缩短!

专注推动网络与安全融合的全球网络安全领导者 Fortinet(NASDAQ:FTNT),近日发布 FortiGuard Labs(Fortinet全球威胁情报响应与研究团队)《2023 下半年全球威胁态势研究报告》。本次新发布的半年度研究报告&a…

MySQL8 新特性——公用表表达式用法 with t1 as (select * from user)

MySQL8 新特性——公用表表达式用法_mysql ctes-CSDN博客 1.普通公用表表达式 MySQL8 新特性——公用表表达式用法 在MySQL 8.0及更高版本中,引入了公用表表达式(Common Table Expressions,CTEs),它是一种方便且可重…

Echarts地图实现:杭州市困难人数分布【动画滚动播放】

Echarts地图实现:杭州市困难人数分布 实现功能 杭州市地区以及散点图分布结合的形式数据展示动画轮播可进去杭州市下级地区可返回杭州市地图展示 效果预览 实现思路 使用ECharts的地图和散点图功能结合实现地区分布通过动画轮播展示数据变化实现下级地区数据的展…

深度学习论文: VanillaNet: the Power of Minimalism in Deep Learning

深度学习论文: VanillaNet: the Power of Minimalism in Deep Learning VanillaNet: the Power of Minimalism in Deep Learning PDF:https://arxiv.org/pdf/2305.12972 PyTorch: https://github.com/shanglianlm0525/PyTorch-Networks 1 概述 提出的VanillaNet通过简化设计&…

《数字图像处理与机器视觉》案例二(基于边缘检测和数学形态学焊缝图像处理)

一、前言 焊缝是评价焊接质量的重要标志,人工检测方法存在检测标准不统一,检测精度低,焊缝视觉检测技术作为一种重要的质量检测方法,正逐渐在各行各业中崭露头角。把焊缝准确的从焊接工件中准确分割出来是焊缝评价的关键一步&…

API接口示例的设计与实现技巧?如何编写?

API接口示例怎么使用?哪些工具可以生成API接口示例? 一个良好的API接口示例可以显著提升开发效率,改善用户体验,并确保系统的稳定性和可扩展性。AokSend将探讨API接口示例的设计与实现技巧,帮助开发者构建高质量的API…

使用el-amap-info-window遇到的问题

使用的这个库https://github.com/yangyanggu/vue-amap 想要滚动amapInfoWindow里的内容,但不触发地图缩放 默认滚动amapInfoWindow里的内容,会触发地图缩放。看了C站一个大佬的文章解决了。 amapInfoWindow会自动滚动到顶部 我的amapInfoWindow里面用了…

Spring AI 接入OpenAI大模型实现同步和流式对话

接入前准备 第一,准备OpenAI API Key,如果你可以科学上网,可以参照[# 如何获得Open ai key]这篇文章在 OpenAI 官方网站上获取 OpenAI API Key。 第二,如果不能科学上网,我们可以通过一些代理商获取OpenAI API Key&a…

使用gradle上传maven工件到新版maven central仓库central.sonatype.com

本文主要用到的插件是sonatype-uploader, 该插件主要功能是上传依赖文件夹到中央仓库。 该文件夹的生成也十分简单,不用担心。 前言 最近在研究maven插件的时候发现发布的网站发生了变化,使用之前的一些插件没能满足我发布依赖的需求,也可…