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

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

news 2026/2/3 9:41:14

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

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/1/20 7:07:44

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/1/31 14:56:07

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

编程新知 2026/2/2 0:43:41