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

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

news 2026/3/27 19:41:39

安装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

PT-Plugin-Plus：PT站点下载助手安装与使用指南

PT-Plugin-Plus&#xff1a;PT站点下载助手安装与使用指南 【免费下载链接】PT-Plugin-Plus PT 助手 Plus&#xff0c;为 Microsoft Edge、Google Chrome、Firefox 浏览器插件&#xff08;Web Extensions&#xff09;&#xff0c;主要用于辅助下载 PT 站的种子。 项目地址: h…...

编程新知 2026/3/27 19:20:52

Gradio项目快速公网演示：除了share=True，你还有这几种轻量级内网穿透方案

Gradio项目快速公网演示&#xff1a;5种轻量级内网穿透方案横向评测 当你开发了一个酷炫的机器学习模型演示&#xff0c;或是精心设计的数据可视化界面&#xff0c;最迫切的需求往往是如何快速分享给同事或客户。Gradio的shareTrue参数可能是大多数开发者首先想到的方案&#x…...

编程新知 2026/3/27 18:42:37

OpenClaw任务编排：GLM-4.7-Flash多步骤自动化设计

OpenClaw任务编排&#xff1a;GLM-4.7-Flash多步骤自动化设计 1. 为什么需要任务编排 上周我需要整理一批技术文档&#xff0c;这个任务包含多个步骤&#xff1a;从不同文件夹收集Markdown文件、统一格式、生成摘要、最后打包发送给团队成员。手动操作不仅耗时&#xff0c;还…...

编程新知 2026/3/27 18:28:32

Comsol光学仿真连续域束缚态BIC，te，tm模式耦合，透射光谱远场偏振矢量（导出数据计算）

Comsol光学仿真连续域束缚态BIC&#xff0c;te&#xff0c;tm模式耦合&#xff0c;透射光谱远场偏振矢量&#xff08;导出数据计算&#xff09;&#xff0c;所见即所得 【手指在键盘上停顿三秒】这周在实验室搞COMSOL光学仿真差点被边界条件逼疯&#xff0c;连续域束缚态(BIC)…...

编程新知 2026/3/27 17:27:57

Untrunc：10倍速视频修复工具，让损坏的MP4/MOV文件起死回生

Untrunc&#xff1a;10倍速视频修复工具&#xff0c;让损坏的MP4/MOV文件起死回生 【免费下载链接】untrunc Restore a truncated mp4/mov. Improved version of ponchio/untrunc 项目地址: https://gitcode.com/gh_mirrors/un/untrunc 你是否曾经因为视频文件损坏而失去…...

编程新知 2026/3/27 16:49:32

雷电模拟器装Magisk后，自带的文件管理器为啥打不开/data？用MT管理器一招搞定

雷电模拟器Magisk环境下文件管理器的权限困局与实战解决方案 当你在雷电模拟器中成功安装Magisk后&#xff0c;可能会遇到一个令人困惑的现象&#xff1a;原本可以自由访问系统目录的自带文件管理器&#xff0c;突然对/data和/system等关键路径"视而不见"。这并非模拟…...

编程新知 2026/3/27 16:47:32

告别Finalshell内存焦虑：实测Xshell 8与MobaXterm，哪款才是低资源占用的SSH神器？

深度评测&#xff1a;Xshell 8与MobaXterm如何解决SSH工具的资源占用难题&#xff1f; 当你的开发工作流被频繁的内存告警打断时&#xff0c;选择一款轻量高效的SSH工具就成为了提升生产力的关键。作为每天需要连接多台服务器的开发者&#xff0c;我深刻理解那种看着任务管理器…...

编程新知 2026/3/27 14:32:29

手把手教你用STM32实现BLDC电机的SPWM控制（附代码调试心得）

STM32实战&#xff1a;无刷直流电机SPWM控制全解析与代码优化指南 从理论到实践&#xff1a;BLDC电机控制的核心逻辑 第一次接触无刷直流电机(BLDC)控制时&#xff0c;我被它优雅的工作原理所吸引——没有电刷的火花和磨损&#xff0c;却能实现高效的能量转换。在工业自动化、无…...

编程新知 2026/3/27 14:01:16

Repomix用户体验：CLI界面设计与交互的终极指南

Repomix用户体验&#xff1a;CLI界面设计与交互的终极指南 【免费下载链接】repomix &#x1f4e6; Repomix (formerly Repopack) is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase t…...

编程新知 2026/3/27 13:15:04

Vision-Agents插件开发完全指南：构建你的第一个AI集成

Vision-Agents插件开发完全指南&#xff1a;构建你的第一个AI集成 【免费下载链接】Vision-Agents Open Vision Agents by Stream. Build Vision Agents quickly with any model or video provider. Uses Streams edge network for ultra-low latency. 项目地址: https://git…...

编程新知 2026/3/27 12:50:50