轻量应用服务器部署vue项目

news2024/11/28 15:58:41

首先我已经拥有一个轻量云服务器了.windows2012的版本:
在这里插入图片描述

1.搭建 FTP 服务

为了将我们打包好的vue项目传到服务器,我们要先在服务器搭建FTP服务。
具体步骤可以参考官方文档,官方文档的教程十分清楚详细,按照步骤来就不会出错:https://cloud.tencent.com/document/product/1207/47639

要记得自己创建好的用户名和密码,之后建立FTP连接的时候需要。

2.设置防火墙

在服务器的防火墙选项中添加一个开放所有端口的的规则:
在这里插入图片描述

在这里插入图片描述

3.打包vue项目为dist

运行npm命令打包vue项目,打包完后会生成一个dits文件夹,这个文件夹就是我们之后要上传到服务器运行的文件夹:

在这里插入图片描述
在这里插入图片描述

4.与轻量应用服务器建立FTP连接

首先要下载 File Zilla:https://filezilla-project.org/,选client的下载
在这里插入图片描述
安装时全部选择默认即可。安装完成后
打开File Zilla
在这里插入图片描述
新建站点,输入服务器的公网ip,端口号为21,输入之前设置的账号密码,就能建立连接了:
在这里插入图片描述

5 上传dist文件夹到服务器

建立完链接后,我们就可以来到打包好的dist路径,右键选择上传:
在这里插入图片描述
上传成功后,我们登陆服务器就能看见设置的文件夹下有我们打包好的dist文件夹:
在这里插入图片描述

6.下载nginx

官网:http://nginx.org/en/download.html 可以下载Stable version
解压下载下来的压缩包,将dist文件夹复制到与nginx.exe平级的目录,如图:
在这里插入图片描述

7.修改nginx.conf文件

修改conf文件夹下的nginx.conf文件,修改端口号和根路径:
在这里插入图片描述
如果只修改了这些配置的话,在部署好项目后如果在二级页面进行刷新操作,会报错404,所以我们还需要配置:

    server {
        listen       YYYY;    //自己设置的端口号
        server_name  192.168.XXX.XXX;   //在黑窗口下ipconifg后出现的IPv4地址复制
        
        location /{
            root E:/website_wap/dist/;   //项目打包后的路径
            index index.html index.htm;
            try_files $uri $uri/ /index.html;    //解决刷新页面变成404问题的代码
        }   
    }


这样我们就解决了刷新页面变成404的问题啦。

运行项目

回到nginx.exe目录下,cmd运行start nginx命令 ,我们的项目就运行起来了,通过服务器的公网ip加端口号就能访问到我们打包好的项目。下面是一些常见的nginx的命令:

其他相关常用命令
start nginx 启动nginx
nginx -s quit 安全关闭
nginx -s stop 强制关闭
nginx -s reload 改变配置文件时,重启nginx工作进程,使配置生效
nginx -s reopen 打开日志文件
nginx -v 查看版本
nginx -h 查看帮助信息

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

传奇服务端服务端运行7个窗口的各窗口功能讲解

大家都知道打开传奇版本里的游戏引擎后,就会弹出7各窗口,下面给大家讲解下各窗口的功能定义 GameCenter是游戏服务器启动程序,负责将DBServer.exe处转来的客户 端转发到相应的M2Server.exe。 DBServer.exe是用户数据库服务器,负责…

Allure与Jenkins持续集成

目标:每次提交代码到代码托管平台(gitee),自动触发jenkins项目构建,生成allure测试报告,并发送邮件通知。 1、部署jenkins Jenkins — 快速入门 2、配置Gitee (1)Plugin Manager&…

01_openstack概述

一、openstack起源 Openstack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的项目Openstack是一套IaaS解决方案Openstack是一个开源的云计算管理平台以Apache许可证为授权二、Openstack七大组件 1、Horizaon组件 Horizon为Openstack服务的Web控制面板&#xff…

leecode#用Read4读取n个字符#相交链表

题目描述: 给你一个文件,并且该文件只能通过给定的 read4 方法来读取,请实现一个方法使其能够读取 n 个字符。 分析: read4 方法:API read4 可以从文件中读取 4 个连续的字符,并且将它们写入缓存数组 buf…

为什么电脑运行越来越慢?解决方法又是什么呢?

文章目录为什么电脑运行越来越慢?解决方法又是什么呢?一,电脑运行慢的原因二,提高电脑运行速度的方法1,重启电脑2,还原(重置)操作系统3,关闭不使用的应用程序4&#xff0…

CrossOver2023Win电脑软件操作在Mac、Linux系统运行教程

在Mac系统中一直存在一个比较令用户们头疼的问题,那就是安装不了想要的Windows软件。如果使用的第一台电脑就是MacBook那接触到的Windows软件想必并不是很多。但我们中的大多数人都是从小先学习了Windows的操作系统,再过渡到Mac系统上的。 那有小伙伴会…

面试:插件化相关---service

插件service启动分析 同样的,先来看看service的常规启动流程 调用contextimpl.startService/bindService/stopService -> AMS,AMS对应创建ServiceRecord和token后,通知ActivityThreadActivityThread收到startService后,会创建…

少儿编程 电子学会图形化编程等级考试Scratch一级真题解析(选择题)2022年9月

2022年9月scratch一级真题解析 选择题(共25题,每题2分,共50分) 1、点击绿旗,下列哪个选项可以实现播放马叫声并在声音全部播放完后,马向右移动 A、 B、 C、 D、

[附源码]计算机毕业设计JAVA小说网站的设计与实现1

[附源码]计算机毕业设计JAVA小说网站的设计与实现1 项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM m…

基于RV1126 Video分析-----链接 isp 与mipi csi 的media模块

从前文&#xff1a;<<图像处理模块所代表的V4L2设备注册>> 中了解到。rkcif_mipi设备注册的过程就是以设备通知器为线索&#xff0c;从顶向下&#xff0c;依次找到下一级设备&#xff0c;添加到V4L2设备种&#xff0c;循环处理。将全部的子设备整理到 V4L2设备中&a…

《InnoDB引擎五》Checkpoint技术

Checkpoint技术 缓冲池的设计目的是为了协调CPU速度与磁盘速度的鸿沟。因此页的操作首先都是在缓冲池中完成的。如果一条DML语句&#xff0c;比如Update或Delete改变了页中的记录&#xff0c;那么此时页是脏的&#xff0c;即缓冲池中的页要比磁盘的新&#xff0c;那么数据库就需…

网络编程简单学习

目录 一、 概述 1. 什么是计算机网络&#xff1f; 2. 网络编程的目的 3. 需要达到什么样的效果&#xff1f; 二、 网络通信的两个要素 1. 通信双方地址 2. 规则&#xff1a;网络通信协议 三、IP地址 1. IP地址概述 2. IP地址分类 3. 域名 四、端口 五、通信协议 …

Python破解WIFI密码完整源代码,实测可成功破解

目录 # 修正记录&#xff1a;2022-12-01 1&#xff0c;先安装Python环境(这个不用多说了吧) 2&#xff0c;安装PyWifi 3,自己手工整理高频弱口令&#xff0c;不建议程序生成的字典&#xff0c;生成的字典成功率实在太低。 4&#xff0c;自己生成字典的算法&#xff1a; 5…

九联UNT413A_S905L3A__AI语音_默认打开ADB_完美线刷固件包【可救砖】

UNT413A_S905L3A__AI语音_默认打开ADB_完美线刷固件包【可救砖】_基于云南原机制作_端口5555 固件特点&#xff1a; 1、修改dns&#xff0c;三网通用&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、无开机广告&#xff0c;无系统更新&#xff0c;…

PyQt5 设置窗口背景

PyQt5 设置窗口背景使用setStyleSheet设置窗口背景图片使用setStyleSheet设置窗口背景颜色使用QPalette设置窗口背景颜色使用QPalette设置窗口背景图片使用paintEvent设置窗口背景颜色使用paintEvent设置窗口背景图片窗口背景主要包括&#xff1a;背景色和背景图片。设置窗口背…

跨境电商必知的交叉销售和追加销售:2022终极指南

关键词&#xff1a;跨境电商、交叉销售、追加销售 跨境电商可以从客户那里获得的潜在收入不会在销售点结束。 交叉销售和追加销售通过吸引客户增加支出来增加您的收入。这是一个双赢的局面&#xff0c;消费者获得了卓越的体验&#xff0c;而你赚到了更多的钱。 但是&#xff0c…

【Pandas数据处理100例】(九十七):Pandas中的eval()函数使用方法

前言 大家好,我是阿光。 本专栏整理了《Pandas数据分析处理》,内包含了各种常见的数据处理,以及Pandas内置函数的使用方法,帮助我们快速便捷的处理表格数据。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10语言环境:python3.7编译器:PyCharmPandas版本:1.3.5N…

axure到底好不好学,有哪些技巧

Axure学习难吗&#xff1f;这个问题一直引起很多朋友的讨论&#xff0c;有的觉得难&#xff0c;有的觉得不难。当然&#xff0c;人不一样&#xff0c;每个人的学习方式也不一样&#xff0c;对学习难度的理解自然也不一样&#xff0c;这个问题自然没有定论。 ​在学习的时候&…

数据库------E-R图和关系模型

1、请输出下面E-R图,并转换成关系模型 有实体 A B C A属性有a1(主键),a2,a3 B属性有b1(主键),b2,b3 C属性有c1(主键),c2,c3 A和B之间有X关系,B和C之间有Y关系,A和C之间有Z关系 一个A对应多个B,一个B对应多个A 一个A对应一个C,一个C对应一个A 一个B对应一个C,一个C对应多…

Js逆向教程19-websocket介绍

Js逆向教程19-websocket介绍 作者&#xff1a;虚坏叔叔 博客&#xff1a;https://xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; 一、websocket介绍 Ws和Wss的区别相当于http和https的区别&#xff0c; 如果你想写一个聊天页面&#x…