Linux服务器nginx部署Vue前端(详细版)

提示:适用于前后端项目的部署

文章目录

  • 前言
  • 一、打包前端文件
  • 二、下载和部署Nginx
  • 三、配置conf文件
  • 启动nginx


前言

搜索到这篇文章想必你已经对Nginx比较了解,我也不对Nginx进行介绍赘述了,只需要明白Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器。下面我将直接介绍如何在Nginx部署前端文件的整个流程。


一、打包前端文件

打包前端文件,打开前端包管理器,使用

npm run build 

打包该项目,打包完成可以发现项目中多了个dist文件夹

二、下载和部署Nginx

这一步可以参考我之前写的点击这里

三、配置conf文件

这一步是重中之重,打开winscp,当然你有更好的也行(只要支持SSH的SFTP文件传输),人话就是能够支持文件上传服务器或编辑服务器文件内容,打开nginx目录下的conf文件夹找到,nginx.conf文件,双击打开。

server {
        listen       80;#nginx监听端口
        server_name  localhost;#指定了本机的域名或主机名
        location / {
            root   /home/dist/;#前端应用程序的根目录
            index  index.html;
        }

在原有基础上http { } 内容中加入上述内容。注意这些都要一 一对应,举个例子需求是在190.21.3.1服务器40端口部署前端,前端文件放在home文件下

server {
        listen       40;#nginx监听端口
        server_name  190.21.3.1;#指定了本机的域名或主机名
        location / {
            root   /home/dist/;#前端应用程序的根目录
            index  index.html;
        }

注意把前端打包后的dist放到root中路径指定文件夹下。

启动nginx

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

启动nginx即可,如果nginx已经启动可参考我上面的文章,先关闭再启动,或直接使用重启指令即可。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/263745.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

postman几种常见的请求方式

1、get请求直接拼URL形式 对于http接口,有get和post两种请求方式,当接口说明中未明确post中入参必须是json串时,均可用url方式请求 参数既可以写到URL中,也可写到参数列表中,都一样,请求时候都是拼URL 2&am…

LeetCode-17 电话号码的字母组合

LeetCode-17 电话号码的字母组合 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。 示例 1: 输入:d…

opencv入门到精通——OpenCV4.1.2之性能衡量与优化方法

目录 目标 使用OpenCV衡量性能 OpenCV中的默认优化 在IPython中衡量性能 更多IPython魔术命令 性能优化技术 目标 在图像处理中,由于每秒要处理大量操作,因此必须使代码不仅提供正确的解决方案,而且还必须以最快的方式提供。因此&#…

Python中__getitem__的奇妙应用

更多资料获取 📚 个人网站:ipengtao.com 理解 __getitem__ 方法 1 基本概念 在Python中,__getitem__ 是一个重要的魔法方法,用于实现对象的索引访问。当使用类似 obj[index] 的方式访问对象时,Python 解释器会自动调…

C#线程Thread的使用

引言 在C#编程语言中,线程是一种并发执行的机制,可以实现多个任务同时执行,提高程序的效率和响应能力。C#提供了Thread类来处理线程相关的操作。本文将详细介绍C#中Thread类的使用方法和注意事项。 目录 引言线程的基本概念线程(…

SoapUI、Jmeter、Postman三种接口测试工具的比较分析!

前段时间忙于接口测试,也看了几款接口测试工具,简单从几个角度做了个比较,拿出来与诸位分享一下。本文从多个方面对接口测试的三款常用工具进行比较分析,以便于在特定的情况下选择最合适的工具,或者使用自己编写的工具…

Selenium Web自动化实践案例,跟着敲代码真香

1 项目背景 https://passport.csdn.net/login CSDN登录页面 2 功能实现 自动运行用例 自动生成测试报告 自动断言与截图 自动将最新测试报告发送到指定邮箱 数据,页面元素分离 PageObjectUnittestddt数据驱动用例 执行日志、分布式执行 3 项目架构…

多线程同步之:QWaitCondition

一、 QWaitCondition 不是通过 强制执行互斥,而是通过提供 条件变量 来同步线程。 1.1 使用 互斥量 和 QReadWriteLock,存在的一个问题 1.2 QWaitConditionQMutex 1.3 1.4 消费者线程先启动 2个线程启动的先后顺序不应调换:用先启动thread…

从零开发短视频电商 在AWS上用SageMaker部署自定义模型

文章目录 简介使用model.tar.gz1.从huggingface上下载模型2.自定义代码3.打包为tar 文件4.上传model.tar.gz到S35.部署推理 使用hub1.在sagemaker上新建个jupyterlab2.上传官方示例ipynb文件3.指定HF_MODEL_ID和HF_TASK进行部署和推理 inference.py官方示例 简介 原始链接&…

【RocketMQ每日一问】rocketmq事务消息原理?

rocketmq事务消息原理? RocketMQ的事务消息主要由三部分组成:半消息(Half Message)、执行本地事务和事务补偿机制。下面详细介绍这三部分: 半消息(Half Message)用户向RocketMQ发送半消息&…

基于ssm的星巴克咖啡店管理系统论文

基于ssm的星巴克咖啡店管理系统 摘要 当下,正处于信息化的时代,许多行业顺应时代的变化,结合使用计算机技术向数字化、信息化建设迈进。以前星巴克咖啡店对于咖啡信息的管理和控制,采用人工登记的方式保存相关数据,这…

【AI提示词艺术】第11期 家居几种类型图处理和人像生成的技巧

家居处理和人像生成的技巧 AI处理家居图像具有以下优势: 自动化处理:AI可以自动处理大量的家居图像,无需人工干预。这大大提高了处理效率,节省了时间和人力成本。 快速识别和分类:AI可以快速准确地识别和分类家居图…

LSTM和GRU vs 普通的循环神经网络RNN

1、考虑下列三种情况下,对比一下普通RNN的表现和LSTM和GRU表现: (1)早期观测值对预测未来观测者具有非常重要的意义。 考虑一个极端情况,其中第一个观测值包含一个校验和, 目标是在序列的末尾辨别校验和是…

常见的弧形导轨有哪些

弧形导轨又叫圆弧导轨、滚轮圆弧导轨,是通过v形滚轮在圆弧v型导轨表面滚动,作圆周运动,运用广泛:数控机床、包装机械、输送设备、医疗器械、航空航天等设备;弧形导轨也分几种,常见的弧形导轨有以下几种&…

关于时区处理策略

前端会通过 App-Id 请求头附带 客户端时区 信息 前端传入的如果是 字符串,会自动根据 请求的客户端时区 解析为对应的 日期 如果前端传入的是时间戳,则无需额外解析转换 如果是 商户后台、管理后台 都统一基于 商户所在国家的时区(总台目前…

机器视觉:AI赋能缺陷检测,铸就芯片产品的大算力与高能效

导言:近年来,国内芯片行业快速发展,市场对芯片需求的不断增大,芯片的缺陷检测压力也越来越大。芯片产品在生产制造过程中,需要经历数道工序,每个生产环节的材料、环境、工艺参数等都有可能造成产品缺陷。不…

2023最新版JavaSE教程——第13天:泛型

目录 一、泛型概述1.1 生活中的例子1.2 泛型的引入 二、使用泛型举例2.1 集合中使用泛型2.1.1 举例2.1.2 练习 2.2 比较器中使用泛型2.2.1 举例2.2.2 练习 2.3 相关使用说明 三、自定义泛型结构3.1 泛型的基础说明3.2 自定义泛型类或泛型接口3.2.1 说明3.2.2 注意3.2.2 举例3.2…

react 2

1.快速搭建开发环境 2.react渲染流程 3.1 jsx基础 概念 3.2 jsx基础 本质 3.3 jsx基础 jsx表达式 3.4 jsx基础 实现列表渲染 3.5 jsx基础 实现条件渲染 3.5 jsx基础 实现复杂的条件渲染 4. react中事件绑定 5.react组建基础使用 6.1 useState 6.2 useState修改状态的规则 7.基础…

海外媒体发稿:雅虎全球发稿推广脱颖而出的10种方法-华媒舍

雅虎全球发稿是一项重要的推广手段,能够帮助企业和个人提升品牌知名度和曝光率。在众多的发稿中脱颖而出并不容易。本文将为您介绍10种让您的雅虎全球发稿在众多文章中脱颖而出的方法,帮助您取得更好的效果。 1. 深入研究目标受众 在撰写雅虎全球发稿前…

【排序算法】C语言实现选择排序与冒泡排序

文章目录 🚀前言🚀冒泡排序✈️冒泡排序的逻辑✈️冒泡排序coding 🚀选择排序✈️选择排序的逻辑✈️选择排序coding 🚀前言 这里是阿辉算法与数据结构专栏的第一篇文章,咱们就从排序算法开始讲起,排序算法…
最新文章