当前位置： 首页 > news >正文

Vue3学习笔记＜-＞nginx部署vue项目

news 文章来源：https://blog.csdn.net/athjyh/article/details/140037754 2025/1/15 17:46:54

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

相关文章：

Vue3学习笔记＜-＞nginx部署vue项目

安装nginx vue项目通常部署到nginx上，所以先安装一个nginx。为了方便安装的是windows版nginx，解压就能用。 项目参考上一篇文章《Vue3学习笔记＜-＞创建第一个vue项目》《Vue3学习笔记＜-＞创建第一个vue项目》…...

编程日记 2024/6/28 14:43:34

使用 WebGL 创建 3D 对象

WebGL Demohttps://mdn.github.io/dom-examples/webgl-examples/tutorial/sample5/index.html 现在让我们给之前的正方形添加五个面从而可以创建一个三维的立方体。最简单的方式就是通过调用方法 gl.drawElements() 使用顶点数组列表来替换之前的通过方法gl.drawArrays() 直接…...

编程日记 2024/6/28 14:42:32

百度地图3d区域掩膜，最常见通用的大屏地图展现形式

需求及效果 原本项目使用的是百度地图3.0,也就是2d版本的那个地图，客户不满意觉得不够好看，让把地图改成3d的，但是我们因为另外的系统用的都是百度地图，为了保持统一只能用百度地图做 经过3天的努力，最后我终于把这个…...

编程日记 2024/6/28 14:40:30

小区物业管理收费系统源码小程序

便捷、透明、智能化的新体验 一款基于FastAdminUniApp开发的一款物业收费管理小程序。包含房产管理、收费标准、家属管理、抄表管理、在线缴费、业主公告、统计报表、业主投票、可视化大屏等功能。为物业量身打造的小区收费管理系统，贴合物业工作场景，轻…...

编程日记 2024/6/28 14:38:27

C++实现一个简单的Qt信号槽机制

昨天写这个文章《深入探讨C的高级反射机制（2）：写个能用的反射库》的时候就在想，是不是也能在这套反射逻辑的基础上，实现一个类似Qt的信号槽机制？ Qt信号槽机制简介 所谓的Qt的信号槽（Signals …...

编程日记 2024/6/28 14:37:26

微信小程序常用的传值

1.通过 URL 传参 在页面跳转时，可以在 URL 中携带参数进行传递，然后在目标页面的 onLoad 生命周期中获取参数。 // 在页面 A 中跳转到页面 B 并传递参数 wx.navigateTo({url: /pages/detail/index?id123 });// 在页面 B 的 onLoad 生命周期中获取参数…...

编程日记 2024/6/28 14:35:23

SQL面试真题解答 数据统计分析，求“同比、环比”等（SQL窗口函数使用）

SQL面试真题解答 数据统计分析，求“同比、环比”等（SQL窗口函数使用） 环比、环比增长率、同比、同比增长率，根据百度百科上的 说明： 环比增长率 环比增长率，一般是指和上期相比较的增长率。 环比增长率&a…...

编程日记 2024/6/28 14:34:22

【递归、搜索与回溯】floodfill算法二

floodfill算法二 1.被围绕的区域2.太平洋大西洋水流问题3.扫雷游戏4.衣橱整理 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励，我们一起努力吧!😃😃 1.被围绕的区域…...

编程日记 2024/6/28 14:33:20

Dataease安装，配置Jenkins自动部署

Dataease安装，配置Jenkins自动部署 一.安装Dataease 安装前准备：1.Ubuntu20.04 LTS国内源安装指定版本Docker 2.docker-compose安装 下载离线安装的安装包，下载地址：https://community.fit2cloud.com/#/download/dataease/v1-…...

编程日记 2024/6/28 14:31:18

关于IDEA启动报错 【JAVA_HOME does not point to a valid JM installation】

希望文章能给到你启发和灵感～ 感谢支持和关注～ 阅读指南 一、基础环境说明1.1 硬件环境1.2 软件环境 二、起因 一、基础环境说明 考虑环境因素不同，大家适当的对比自己的软硬件环境情况分析～ 1.1 硬件环境 MacOS Monterey 版本 1…...

编程日记 2024/6/28 14:29:16

设置小蓝熊的CPU亲和性、CPU优先级再设置法环的CPU亲和性

# 适用于Windows系统 # 时间 : 2024-06-28 # 作者 : 三巧(https://blog.csdn.net/qq_39124701) # 文件名 : 设置小蓝熊的CPU亲和性、CPU优先级再设置法环的CPU亲和性.ps1 # 使用方法: 打开记事本，将所有代码复制到记事本中，保存文件时候修改文件后…...

编程日记 2024/6/28 14:27:13

Oracle中的序列（Sequence）是一种数据库对象

Oracle中的序列（Sequence）是一种数据库对象，用于生成数字序列，通常用于为主键列生成唯一、连续的数值。以下是一些使用序列的案例： 1. **为主键生成唯一值**： 在Oracle中，序列最常用的场景是…...

编程日记 2024/6/28 14:26:12

热点观察 | 《姜饼人王国》新作来袭、《Monopoly GO!》荣登5月全球畅销榜榜首

本周出海热点： 1. 中国品牌借欧洲杯打响知名度 2. 米哈游玩家切割二次元 3. 6月27日，Steam游戏《六月衷曲》上线TapTap 4. 《Monopoly GO!》荣登5月全球畅销榜榜首 5. 《地下城与勇士》拿下本周亚洲T1市场畅销榜冠军 6. 《姜饼人王国》新作强势登顶…...

编程日记 2024/6/28 14:25:10

智能网络构建：探索大模型在网络领域的应用

网络领域以其高度复杂性和快速迭代为特点，完成从网络设计、配置、诊断到安全的网络任务需要广泛的专业知识。这些任务的固有复杂性，加上网络技术和协议不断变化的格局，为传统基于机器学习的方法带来了显著的障碍。这些方法在泛化和自动化网络…...

编程日记 2024/6/28 14:23:07

C++编程逻辑讲解step by step：定义一个Person类,它的每个对象表示一个人。

题目 定义一个Person类,它的每个对象表示一个人。数据成员必须包含姓名、出生年份、死亡年份&#xff0c;一个构造函数&#xff0c;一析构函数&#xff0c;读取数据的成员函数&#xff0c;一个print()成员函数显示所有数据。 #include <iostream> using namespace std;…...

编程日记 2024/6/28 14:21:05

DBdoctor产品介绍

基本信息 DBdoctor是一款企业级数据库监控、巡检、性能诊断、SQL审核与优化平台&#xff0c;致力于解决一切数据库性能问题。采用eBPF技术可对数据库做细粒度的扫描&#xff0c;帮助您一分钟内找到数据库性能问题&#xff0c;实现性能诊断百倍提效。针对数据库性能诊断门槛高、…...

编程日记 2024/6/28 14:20:02

一加Ace3 刷机救砖简化说明

注意&#xff1a;工具使用英文目录&#xff0c;支持救砖和降级。PJE110国行版&#xff0c;CPH2609国际版。目前国行版不能完美转换国际版&#xff0c;每次升级都需要刷oplusstanvbk&#xff0c;不建议使用。跨国转换或ROOT一定先解锁Bootloader&#xff0c;可以使用“一加全能工…...

编程日记 2024/6/28 14:17:59

【服务器05】之【登录/注册账号成功转至游戏场景】

Unity登录注册数据库 打开【服务器01】的文章项目 导入新UI系统 点击2D 双击输入栏位置 修改输入框尺寸及位置 放大字体 修改默认输入文字 发现中文字变成了口口口口 原因是新UI系统不支持中文&#xff0c;解决这个问题需要更换字体 并且修改输入时字体大小 我们取电脑中找Fon…...

编程日记 2024/6/28 14:16:57

平价蓝牙耳机推荐性价比高，性价比高的蓝牙耳机学生党推荐

市场上的蓝牙耳机价格从几十元到几百甚至上千不等&#xff0c;性能与价格也呈现多样化&#xff0c;对于学生党来说&#xff0c;一个理想的选择是那些性价比高的平价蓝牙耳机&#xff0c;它们在不牺牲必要功能的同时&#xff0c;提供了可接受的音质和足够的便利性&#xff0c;接…...

编程日记 2024/6/28 14:15:56

【华为战报】5月、6月HCIP考试战报！

华为认证&#xff1a;HCIA-HCIP-HCIE 点击查看&#xff1a; 【华为战报】4月 HCIP考试战报&#xff01; 【华为战报】2月、3月HCIP考试战报&#xff01; 【华为战报】11月份HCIP考试战报&#xff01; 【HCIE喜报】HCIE备考2个月丝滑通关&#xff0c;考试心得分享&#xff…...

编程日记 2024/6/28 14:14:55

OBD诊断

文章目录 OBD 参考标准OBD 服务OBD服务中的DTCOBD服务中0x03和0x07的区别参考 OBD 参考标准 OBD的标准&#xff1a; ISO 15031 Road Vehicles-Communication between vehicle and external equipment for emission-related diagnostics OBD 服务 序号ID服务说明服务详解10x0…...

编程日记 2024/6/28 14:10:50

Elasticsearch 聚合查询

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…...

编程日记 2024/6/28 14:08:46

adb remount fails - mount: ‘system‘ not in /proc/mounts 解决办法

mount -o rw,remount /挂载根 mount -o ro,remount /将状态重置为“ro” 以下是我个人的一些话 我热衷于在网络上分享我遇到的问题和解决方案。如果你有任何问题或需要帮助&#xff0c;欢迎留言交流&#xff0c;在共同学习的道路上一起进步。我很高兴结识那些在学习上积极进取…...

编程日记 2024/6/28 14:07:45

百元蓝牙耳机推荐2024哪个好？蓝牙耳机性价比之王推荐

现在的百元价位的蓝牙耳机成为了许多消费者入门级的选择&#xff0c;它不仅需要满足基础的通话需求&#xff0c;更要在音质、舒适度、续航能力等多方面达到一定的标准&#xff0c;随着技术的发展和市场的竞争激烈&#xff0c;各大品牌在这一价格区间推出了极具竞争力的产品&…...

编程日记 2024/6/28 14:05:43

Spring项目报错解读与全部报错详解

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客 这是我的 github https://github.com/Qiuner ⭐️ ​ gitee https://gitee.com/Qiuner &#x1f339; 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1f604; (^ ~ ^) 想看更多 那就点个关注吧 我…...

编程日记 2024/6/28 14:04:42

10秒教会你mysql的连接

连接MySQL数据库通常可以通过多种方法实现&#xff0c;以下是几种常见的方法&#xff0c;我将按照您的要求以清晰、分点的方式归纳说明&#xff1a; 1. 使用MySQL命令行客户端 打开终端或命令提示符&#xff1a;首先&#xff0c;打开您的计算机上的终端或命令提示符窗口。输入…...

编程日记 2024/6/28 14:03:40

万物皆可爬——亮数据代理IP+Python爬虫批量下载百度图片助力AI训练

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【导航大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…...

编程日记 2024/6/28 14:01:38

OpenCv形态学（一）

目录 形态学转换 结构元素 腐蚀 膨胀 开运算 闭运算 形态学梯度 顶帽 黑帽 图像轮廓 查找轮廓 绘制轮廓 形态学转换 形态变换是一些基于图像形状的简单操作。通常在二值图像上执行。它需要两个输入&#xff0c;一个是我们的原始图像&#xff0c;第二个是决定操作性…...

编程日记 2024/6/28 14:00:37

CSS基础汇总

CSS 1. 选择器 标签选择器 通过标签名找标签&#xff08;把指定的样式应用到某一个、组、类标签上&#xff09; id选择器 通过id属性值找标签&#xff0c;关键符号#id值{样式} 复合选择器 1、并列选择器&#xff1a;关键符号&#xff0c;用法&#xff1a;选择器1&#xff0c…...

编程日记 2024/6/28 13:59:35

cocos creator让所有button点击时播放音效

原理&#xff1a; 利用prototype属性&#xff0c;通过重写 cc.Button.prototype._onTouchEnded 方法&#xff0c;以便在按钮被点击时播放音频。通过重写其 _onTouchEnded 方法&#xff0c;可以添加自定义行为&#xff0c;如播放音频。 概念解释&#xff1a; prototype&#…...

编程日记 2024/6/28 13:58:34

没有页面的网站怎么做性能测试/关键词排名批量查询

http://www.prglab.com/blog/js-tutorial...

编程日记 2025/1/15 16:37:50

建个企业网站对公司宣传有用吗/手游推广渠道平台

golang开源项目如今已经狂奔了10年&#xff0c; Google的Go编程语言无疑已经名声大噪。 Go轻巧且易于编译&#xff0c;由于其慷慨的库和抽象可简化并发和分布式&#xff08;读取&#xff1a;云&#xff09;应用程序的开发&#xff0c;因此引起了广泛的关注。 但是&#xff0c;…...

编程日记 2025/1/15 16:16:14

专业网站建设制作/百度热搜榜今日头条排名

GitHub上&#xff0c;一份用Python做交互式图形的资源火了。 这一工具名为Bokeh&#xff0c;官方介绍称&#xff0c;它能读取大型数据集或者流数据&#xff0c;以简单快速的方式为网页提供优美、高交互性能的图形。 比如&#xff0c;有人用它做出了这样的图&#xff1a; 有人…...

编程日记 2025/1/15 16:00:44

怎么选择合肥网站建设/福州百度快速优化

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid1811 思路&#xff1a;先处理‘‘&#xff0c;全部合并为同一个节点&#xff0c;然后在拓扑排序就可以了。。。 拓扑排序知识&#xff1a; *如果一次入队入度为零的点大于1则说明拓扑排序序列不唯一*如果排序的…...

编程日记 2025/1/15 15:47:22

无锡企业网站制作公司/制作网页教程

目前自动化测试可谓是人人在提&#xff0c;而且自动化工具和一些开源框架也是层出不穷。截止现在&#xff0c;我也接触了一些自动化的知识&#xff0c;分享下。 一、WebUI自动化 1. 工具或框架 Unittest框架&#xff0c;SeleniumWebdriverPython集成开发 优势&#xff1a; ①…...

编程日记 2025/1/15 12:34:42

js网站模板怎么用/明年2024年有疫情吗

我们使用DevExpress控件做开发&#xff0c;可能大多用的是XtraGrid控件&#xff0c;还有TextEdit、ComobBoxEdit、SimpleButton等常用的表单类控件&#xff0c;其实DevExpress的强大&#xff0c;是因为它提供了相当丰富的控件&#xff0c;从这篇博客开始&#xff0c;分享那些冷…...

编程日记 2025/1/15 2:22:06