前端vue部署网站

server/2024/12/22 17:34:58/

这里讲解一下前端vue框架部署网站,使用工具是 xshell 和 xftp (大家去官网安装免费版的就行了)

服务器

我使用的阿里云服务器,买的是 99 一年的,淘宝有新手9.9 一个月服务器。可以去用,学生的话是有免费三个月的(我没找到)

点击首页的控制台

点进入后

这个就是你服务器的公网IP

记得设置 80 安全组

安全组很重要!!大家可自行去网上找相关设置

前端项目打包

运行 npm run build 

如果运行这个命令出问题了可以用

npm run build-only

如果出现各种错误是因为 Typescript 的 类型检查出问题了可以在 package.json 下面写这个

(当然这个有可能你的问题和我说的不符,遇见问题,拿问题去百度!!不要chat )

 打包后,会在根目录下多出一个  dist  文件夹。

使用xshell

打开xshell,会让你新建连接,地址写你的服务器地址,以及最好保存 用户名和密码,方便下次登录,连接成功是下面这样

安装nginx

yum install -y nginx

这里注意如果 一直报 Nothing to do

如果你尝试了各种网上的办法,还是有问题,那很有可能是下面这个原因(之前因为这个困扰了好几天)

【2022最新】yum -y install nginx nothing to do (装epel-release也没用的原因)_yum nothing to do-CSDN博客

然后尝试 输入

whereis nginx

会出现:

然后我们进入到(输入下面回车)

cd /etc/nginx

这里就是nginx目录下

打开 xftp 连接是一样的 ,介绍一下 xftp 左边是你自己电脑磁盘目录,右边是服务器的磁盘目录,xftp支持直接拖曳文件夹,上传到服务器,非常好用

我习惯在 usr/www/ 目录下放前端项目

我们直接在地址栏输入 /usr  右击新建 www 目录

新建好之后,进入www项目,在左边找到你要部署的项目根目录

然后把我们之前打包好的 dist 文件夹直接拖曳到右边

nginx配置

在启动 nginx 前,我们需要先修改一下配置文件

前面我们已经进入到了 nginx 目录

输入

vim nginx.conf

进入之后

需要编辑按,shift + i

然后在 root 位置后面修改

成 /usr/www/dist  如果要复制进去,必须右击然后选择粘贴

在root那句后后面回车 ,按 tab 建输入

try_files $uri $uri/ /index.html;

 上面这个命令,是解决刷新地址栏 404 问题 ,当然如果你的vue项目的 路由是 hashRouter 是没有这个问题的。

按 ESC 键,输入

:wq

输入的时候记住

输入会在最下面,确保你的 ESC 键,按下去,别输入到 nginx.conf 文件里面去了

然后 我们输入 

nginx

启动 nginx

如果出现了端口占用的情况

输入

netstat -anp|grew 80

找到被占用的 80 端口的 pid  

也就是LISTEN后面的 那个数字

输入

kill 10019

 然后启动输入

nginx

此外输入 nginx -t 可以看你的配置文件是否有问题,如果说的是 successful 就没问题

其他问题:

前端项目发布到Nginx里报Failed to load module script错误_nginx mjs-CSDN博客

nginx.pid打开失败以及失效的解决方案_nginx.pid failed-CSDN博客 

参考文章:

 前端Vue项目打包部署实战教程 - 知乎 (zhihu.com)


http://www.ppmy.cn/server/132221.html

相关文章

extern

1. 声明外部变量 现代编译器一般采用按文件编译的方式,因此在编译时,各个文件中定义的全局变量是相互透明的,也就是说,在编译时,全局变量的可见区域限制在文件内部。extern可以看到别的文件中的全局变量。 2. 在c中用…

2024年区块链钱包现状与未来趋势分析

钱包作为Web3世界的入口,充当了用户与区块链应用交互、管理资金和传递信息的关键工具。随着区块链技术的发展,钱包生态系统日益多样化,涌现出大量不同类型的解决方案。这些解决方案不仅极大地改善了用户体验,还推动了区块链技术和…

鹅厂JS面试题——0.1+0.2=0.3吗?

首先公布答案:在JavaScript 中,0.1 0.2 ≠ 0.3 为什么? JavaScript 中的数字使用 IEEE 754 标准的双精度浮点数(64 位)进行表示。这种表示方式在处理十进制小数时,不能精确地表示某些数字。比如0.1 和 0.2 这样的十进…

如何在Vue项目中封装axios

文章目录 一、axios简介基本使用 二、封装axios的原因三、封装axios的方法1. 设置接口请求前缀2. 设置请求头和超时时间3. 封装请求方法4. 添加请求拦截器5. 添加响应拦截器小结 一、axios简介 axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端,适用于浏览器和…

调用AI 通过相机识别地标

https://www.youtube.com/watch?vViRfnLAR_Uc&listPLQkwcJG4YTCRJxkPPDBcKqDWrfF5qanQs&index3学习视频 TensorFlow Hub 机器学习模型的代码库 找到地标模型 如何在Android上使用ts模型 https://blog.tensorflow.org/2018/03/using-tensorflow-lite-on-android.html…

Vue实现动态表单

使用 Vue 实现动态表单 在前端开发中,我们经常遇到根据用户输入动态生成不同表单项的需求。这类动态表单不仅提升了用户体验,还可以让复杂的交互流程变得简洁而高效。本文将详细讲解如何使用 Vue 3 的响应式特性,逐步构建一个递归动态表单。…

Spring Boot 3新特性@RSocketExchange轻松实现消息实时推送

Spring Boot 3新特性RSocketExchange轻松实现消息实时推送 随着微服务架构的普及,实时消息推送成为许多现代应用程序的核心需求。Spring Boot 3引入了RSocketExchange注解,这一新特性使得开发者能够轻松实现消息实时推送,极大地简化了客户端…

js面试题---js伪类和伪元素的区别

一 伪类(Pseudo-classes) 1 定义 伪类是用于选择处于特定状态或条件下的 HTML 元素。它们通常以单冒号 (😃 开头,后面跟着伪类名称。这些状态可能与用户的交互、元素在文档中的结构位置等相关。 2 常见伪类 :hover 当鼠标悬停…