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

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

news 2026/5/13 4:17:12

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

管 Vibe Coding 项目，就像管公共厕所

本文整理自"AI炼金术"播客对徐文浩的访谈&#xff0c;探讨 AI 辅助编程&#xff08;Vibe Coding&#xff09;在组织落地后面临的治理挑战和应对策略。从"屎山三年一遇"到"屎山月月有"传统软件开发中&#xff0c;一个系统的"屎山化"通常…...

编程新知 2026/5/13 2:53:24

Kubernetes配置管理神器Monokle：可视化IDE提升YAML开发效率

1. 项目概述&#xff1a;一个被低估的Kubernetes配置管理神器如果你和我一样&#xff0c;每天都在和成堆的YAML文件、复杂的Kubernetes资源关系以及让人头疼的配置漂移问题打交道&#xff0c;那你一定理解那种在终端、IDE和Dashboard之间反复横跳的疲惫感。几年前&#xff0c;当…...

编程新知 2026/5/13 2:27:53

3PEAK思瑞浦 TPA3532-SO1R SOP8 运算放大器

特性 超低输入偏置电流:-在TA25C时最大土1pA(实验室测试限值)-在-40C至125C(实验室测试限值)下&#xff0c;最大土30皮安 低输入失调电压:250V(最大值)集成保护缓冲器&#xff0c;最大偏移电压200V低电压噪声密度:18nV/Hz(在1kHz时). 宽带宽:2.1MHz 供电电压:4.5V至16V(2.25V至…...

编程新知 2026/5/13 1:41:38

白嫖新网免费云主机，挂QQ机器人亲测可用

申请门槛低&#xff1a;只要手机号&#xff0c;不需要人脸识别&#xff0c;不想太麻烦就选择阿贝云 配置够用&#xff1a;1核1G 20G SSD&#xff0c;挂QQ机器人完全够 国内速度快&#xff1a;独立公网IP&#xff0c;延迟低&#xff0c;不掉线申请花了不到5分钟&#xff0c;装完…...

编程新知 2026/5/13 1:17:16

Arm编译器在嵌入式开发中的优化实践

1. Arm编译器嵌入式开发环境概述在嵌入式系统开发领域&#xff0c;工具链的选择往往决定了最终产品的性能上限。作为Arm架构的"原生"编译器&#xff0c;Arm Compiler for Embedded凭借其深度优化的代码生成能力&#xff0c;在物联网设备、工业控制器等资源受限场景中…...

编程新知 2026/5/13 0:03:41

字节投2000亿、DeepSeek募500亿：国产AI算力军备竞赛进入“核弹级“对决

一、一条被低估的新闻2026年5月&#xff0c;当大多数人还在关注GPT-5.5的幻觉率降了多少个百分点时&#xff0c;中国AI产业发生了一件更具战略意义的大事——字节跳动宣布2026年AI基础设施资本支出超2000亿元&#xff0c;几乎同时&#xff0c;DeepSeek传出拟募资最高500亿元&am…...

编程新知 2026/5/12 23:53:10

Windows安卓子系统终极指南：从基础配置到专业开发全流程

Windows安卓子系统终极指南&#xff1a;从基础配置到专业开发全流程 【免费下载链接】WSA Developer-related issues and feature requests for Windows Subsystem for Android 项目地址: https://gitcode.com/gh_mirrors/ws/WSA 想要在Windows 11上无缝运行安卓应用吗&…...

编程新知 2026/5/12 21:45:49

基于GAN的端到端ISP：用AI学习从RAW到RGB的图像处理革命

1. 项目概述&#xff1a;从“拍”到“算”的ISP革命在计算机视觉和图像处理领域&#xff0c;图像信号处理器&#xff08;ISP&#xff09;一直扮演着“幕后英雄”的角色。它负责将相机传感器捕捉到的原始、未经处理的RAW Bayer数据&#xff0c;转换为我们手机相册里那些色彩鲜艳…...

编程新知 2026/5/12 20:24:31

基于MCP协议构建Jira Tempo工时管理AI助手：从原理到实践

1. 项目概述&#xff1a;一个专为Jira Tempo设计的MCP服务器 如果你和我一样&#xff0c;每天都要在Jira里手动填写Tempo工时&#xff0c;然后对着那些重复的、琐碎的操作感到厌倦&#xff0c;那么这个项目可能就是你的“救星”。 ivelin-web/tempo-mcp-server 是一个基于Mo…...

编程新知 2026/5/12 18:18:07

教育资源共享新范式：智能解析技术如何重塑教材获取体验

教育资源共享新范式&#xff1a;智能解析技术如何重塑教材获取体验 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内容。 项目地址…...

编程新知 2026/5/12 18:03:08