【Vue】如何使用 Nginx 部署 Vue 项目_前端代码更新用重启nginx吗-程序员宅基地

技术标签: Nginx  CentOS 7  部署&服务器  Vue  部署  

如何在 CentOS 7 服务器上使用 Nginx 部署 Vue 项目

最近练手做了一个关于沙雕少女的 Vue 项目,正好之前参加 Hackathon 租了一年的服务器,于是想着不如把它部署上去给小伙伴们看看~So 哈啤!

结果一部署就是一个多小时,其中大多数时间都是花在了寻找、筛选和尝试不同的教程上,最后真正部署的时间其实还不到十分钟。

或许也不能说网上的大多数教程都已经过时了,可能是我本身服务器的配置和操作存在瑕疵,但是这里还是想给大家一些借鉴和参考,希望能让大家少走几步弯路。

前置条件:一台功能完好的 Linux 服务器(CentOS 7系统,其他 Linux 系统可类比);一个可以正常运行的 Vue 项目;FileZilla 软件(通过 FTP 协议在服务器与本机间传输文件,强烈推荐大家使用!)

补充说明:由于对 Vue 的了解还不深入,在这里声明一下,我的 Vue 项目是使用 vue-cli 自动配置好的,可以通过 npm run build 自动构建

正常流程

1. 执行 npm run build 构建项目

在 Vue 项目的主目录下调出命令行( Windows 用户可以在文件夹中按住 shift 点击右键,选择【在这里打开命令行 / PowerShell】),执行 npm(或 cnpm) run build;命令执行完毕后你将会看到项目主目录下出现了一个名为 dist 的目录,打开其中的 index.html 即可实现对 V

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hxw3274743/article/details/96168341

智能推荐

一文读懂Python web框架和web服务器之间的关系-程序员宅基地

文章浏览阅读510次。我们都知道 Python 作为一门强大的语言,能够适应快速原型和较大项目的制作,因此被广泛用于 web 应用程序的开发中。在面试的过程中,大家或多或少都被问到过这样一个问题:一个请求从浏览器发出到数据返回都经历过哪些过程?要回答这个问题,首先你需要对 HTTP 协议、web框架、服务器等底层知识有一定的储备量,同时需要对 web 框架和服务器之间的关联有一定的了解,这里有张图上面详细的标明它们之间..._python与服务器之间是什么关系

【业务领域】以太Mac/IP/UDP/TCP报文格式简介_mac层 packet格式-程序员宅基地

文章浏览阅读1.3k次,点赞20次,收藏24次。LLDP(Link Layer Discovery Protocol)是IEEE 802.1ab中定义的链路层发现协议。LLDP是一种标准的二层发现方式,可以将本端设备的管理地址、设备标识、接口标识等信息组织起来,并发布给自己的邻居设备,邻居设备收到这些信息后将其以标准的管理信息库MIB(Management Information Base)的形式保存起来,以供网络管理系统查询及判断链路的通信状况。_mac层 packet格式

innerHTML和innerText的使用-程序员宅基地

文章浏览阅读141次。​导语 歌谣 歌谣 innerHTML和innerText的使用​编辑代码部分``` geyaofangfang ```运行结果```geyaofangfang innerHtmlfangfang innerText```总结 一个返回的是带有标签的属性 一个返回标签下的所有值​..._innerhtml与innettext

py实战绘制人口金字塔图_python人口金字塔图csdn-程序员宅基地

文章浏览阅读4.1k次,点赞8次,收藏29次。一个刚刚学习python绘图的学渣。今天非常开心阅读了《python数据可视化》(黑马程序员编著)其中的“绘制人口金字塔图”章节被我成功运行出来,特此写篇博文纪念自己。_python人口金字塔图csdn

RSSC-LLAVA:基于XTuner用遥感数据微调LLAVA模型-程序员宅基地

文章浏览阅读524次,点赞10次,收藏10次。基于UCM场景分类数据集构建简单的对话文本,随后利用Xtuner微调LLAVA模型,实现遥感图文问答,主要是场景分类。_rssc-llava

媒体 | 雷锋网独家访谈:ArcBlock CEO 冒志鸿:所谓区块链3.0的真正所指-程序员宅基地

文章浏览阅读84次。专访《ArcBlock CEO 冒志鸿:所谓区块链3.0的真正所指》文 |温晓桦来自雷锋网(leiphone-sz)的报道在现有云计算的平台之上,抽象出一层专门为区块链来做的服务平台。...

随便推点

【计算机体系结构】计算机系统结构的基本概念——基本知识要点汇总-程序员宅基地

文章浏览阅读1.7k次,点赞3次,收藏12次。计算机系统结构的基本概念,主要针对计算机系统结构的定义、层次结构、分类、定量分析技术、发展,以及并行性相关内容进行总结阐述_计算机系统结构

C++ 打印九九乘法表_#include <iostream>0203using namespace std;04 //打印-程序员宅基地

文章浏览阅读223次。int a, b;for (a = 1;a < 10;a++){for(b = 1;b _#include 0203using namespace std;04 //打印九九乘法表05 // auth

vscode-程序员宅基地

文章浏览阅读158次。vscode设置背景色链接

基于深度学习的高精度二维码检测识别系统(PyTorch+Pyside6+模型)_深度学习识别dm码-程序员宅基地

文章浏览阅读748次。基于深度学习的高精度二维码检测识别系统可用于日常生活中检测与定位二维码目标,利用深度学习算法可实现图片、视频、摄像头等方式的二维码目标检测识别,另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型训练数据集,使用Pysdie6库来搭建页面展示系统,同时支持ONNX、PT等模型作为权重模型的输出。本系统支持的功能包括二维码训练模型的导入、初始化;置信分与IOU阈值的调节、图像上传、检测、可视化结果展示、结果导出与结束检测;视频的上传、检测、可视化结果展示、结果导出与结束检测等_深度学习识别dm码

【引擎动态】Cocos2d-JS v3.1发布说明-程序员宅基地

文章浏览阅读54次。Cocos2d-JS是Cocos2d-x的JavaScript版本,融合了Cocos2d-html5和Cocos2d-x JavaScript Bindings。它支持Cocos2d-x的所有核心特性并提供更简单易用的JavaScript风格API,并且天然支持原生、浏览器跨平台应用。在3.x版中,Cocos2d-JS完成了不同平台工作流的彻底整合,为不同平台提供了统一的开发体验。无论开发web应..._cocos2d-js v3.1webgl 与 canvas

关于全球时间的一点理解_setenv("tz",tzname,1);-程序员宅基地

文章浏览阅读864次。对程序员而言,获取某个地区的时间可采用下面步骤。step 1: 获取 Unix 时间戳 // sntp协议step 2: 转化为某个地区的时间 // setenv(“TZ”,”时区”,1) unix时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数。或称Unix时间(Unix time)、POSIX时间(POSIX time),是一种时间表示方式,定义为从格林_setenv("tz",tzname,1);

推荐文章

热门文章

相关标签