(部署服务器系列四)部署Vue步骤(使用nodejs)

1. 构建项目(打包Vue):

  • 构建前设置main.js
//关闭开发模式提示
Vue.config.devtools=false
Vue.config.productionTip = false

设置指向的服务端后端ip和端口,我的常量属性统一放在了constants.js

export const AIOS_BASE_URL = "http://192.168.0.111/api"
export const IMG_BASE_URL = "http://192.168.0.111/upload/image/"
  • 在项目根目录下运行构建命令。
    npm run build
    这将创建一个dist目录,里面包含了用于生产环境的文件。

2. 准备服务器:

确保服务器运行环境满足Vue应用的运行需求(Node.js环境)。CentOS的安装方法如下:

  • 首先,你需要添加NodeSource的Yum仓库到你的系统。你可以根据需要安装特定版本的Node.js,例如Node.js 14.x,可以使用以下命令:
    curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
  • 添加仓库后,你可以使用yum命令安装Node.js:
    sudo yum install -y nodejs
  • 安装完成后,你可以检查Node.js和npm的版本,确认安装成功:
    node -v
    npm -v
    这些命令会添加NodeSource仓库,下载并安装Node.js及npm。安装完成后,你就可以在CentOS 7上使用Node.js和npm了。

3. 上传文件:

将整个dist文件夹上传到服务器指定的文件夹中。假设放在是/home/app

4. 配置服务器端脚本:

在服务器的静态资源目录/home/app下创建一个简单的服务器入口文件,例如server.js(以Node.js为例):

const express = require('express');
const path = require('path');
const app = express();app.use(express.static(path.join(__dirname, 'dist')));app.get('*', function(req, res) {res.sendFile(path.join(__dirname, 'dist/index.html'));
});const port = process.env.PORT || 8080;
app.listen(port);
console.log('Server started on port ' + port);

5. 运行服务器端脚本:

  • server.js同级目录下,运行命令,先安装依赖模块express
    npm install express --save
  • 在服务器的指定目录下运行server.js。
    node server.js
  • 如需保持后台运行
    nohup server.js &

扩展

6、配置服务器安全性和性能:

根据需要配置服务器安全性(如HTTPS)和性能优化(如使用CDN,压缩文件,缓存等)。

7、设置DNS和反向代理:

配置DNS以指向服务器的IP地址,并设置反向代理,如果需要的话。(Nginx)

8、监控应用性能和日志:

监控应用性能指标和日志,以便发现和解决问题。

以上步骤提供了一个基本的Vue应用部署到服务器的指南。具体步骤可能会根据你的服务器配置、部署需求和技术栈有所不同。

往期文章

(部署服务器系列一)虚拟机模拟部署服务器
(部署服务器系列二)服务器上安装springboot运行环境,发布并运行项目

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

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

相关文章

生成式AI的未来:智慧对话与自主代理的抉择

生成式AI的未来:智慧对话与自主代理的抉择 随着生成式AI技术的不断进步,关于其未来发展方向的讨论也愈发激烈。究竟生成式AI的未来是在对话系统(Chat)中展现智慧,还是在自主代理(Agent)中体现能…

Mysql-覆盖索引和前缀索引

一.SQL提示 SQL提示,是优化数据库的一个重要手段,简单来说,就是在SQL语句加入一些人为的提示来达到 二.覆盖索引 尽量使用覆盖索引(查询使用了索引,并且需要返回的列,在该索引中已经全部能够找到),减少select* 知识小贴士: using index condition :查找…

android前台服务

关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业变现、人工智能等,希望大家多多支持。 未经允许不得转载 目录 一、导读二、使用2.1 添加权限2.2 新建…

数据丢失不用愁!这四款数据恢复大师免费版助你找回珍贵回忆

我们在办公或者是生活中常常会遇到不小心将手机设备或者计算机当中的重要数据误删除/格式化/或其他不小心丢失的情况,但是不用紧张,这篇文章就是给大家分享如何恢复他们,以下带来除易我数据恢复外的其他好用的数据恢复软件: 第一…

python windows环境部署

在官网安装www.python.org linux系统的只能编译安装 windows的可以直接安装 这里是windows安装 .3.9.6版本 一直下一步就可以,然后鼠标右键在按住shift用终端打开 输入py或者python验证一下是否安装成功 打开目录文件夹 在里面新建一下pip的文件夹,里…

SpringCloud+Vue3多对多,多表联查

♥️作者:小宋1021 🤵‍♂️个人主页:小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识,和大家一起努力呀!!! 🎈🎈加油! 加油&#xff01…

黑马头条vue2.0项目实战(二)——登录注册功能的实现

1. 布局结构 目标 能实现登录页面的布局 能实现基本登录功能 能掌握 Vant 中 Toast 提示组件的使用 能理解 API 请求模块的封装 能理解发送验证码的实现思路 能理解 Vant Form 实现表单验证的使用 这里主要使用到三个 Vant 组件: NavBar 导航栏 Form 表单 F…

分布式锁-数据库锁

本文主要分享如何使用数据库乐观锁的方案,实现分布式定时任务抢锁执行任务的场景,避免重复执行任务。 案例技术:OracleSpringBootxxl-Job 环境准备 xxl-Job部署请移步:Springxxl-joboracle_xxl-job oracle配置-CSDN博客 SpringB…

人工智能算法工程师(高级)课程7-图像分割项目之DeepLab模型的搭建与代码详解

大家好,我是微学AI,今天给大家介绍一下人工智能算法工程师(高级)课程7-图像分割项目之DeepLab模型的搭建与代码详解。本文将详细介绍DeepLab模型的关键组成部分,包括Image Pyramid、Encoder-Decoder、SPP模型和ASPP模型。我们将从数学原理出发,配合LaTeX公式,并使用PyTorc…

关于珞石机器人二次开发SDK的posture函数的算法RX RY RZ纠正 C#

在珞石SDK二次开发的函数钟,获取当前机器人位姿的函数posture函数在输出时会发现数据不正确,与示教器数据不一致。 其中第一个数据正确 第二三各数据为相反 第四五六各数据为弧度制 转换方法为(弧度/PI)*180度 然后发现第四个数据还要加上180度 第五…

docker Docs相关使用文档链接

Docker Docshttps://docs.docker.com/ docker compose | Docker Docshttps://docs.docker.com/reference/cli/docker/compose/docker | Docker Docshttps://docs.docker.com/reference/cli/docker/

工作很难受,还要不要继续留在职场上?

先说结论:我非常赞同大家离开职场 虽然小编现实的工作是有关于人力资源的,高级点叫做猎头,低俗点讲就叫“人贩子” 原因可能和其他人不太一样,大家自行理解 1.现在的社会资源太少,“蛋糕”太小 大家要明白最重要的…

Ethernet

目录 1. Physical Layer(PHY)2. MAC2.1. MAC帧格式2.2. MAC地址与IP地址3. RGMII接口FPGA实现以太网(一)——以太网简介 以太网(Ethernet)是指遵守 IEEE 802.3 标准组成的局域网通信标准, IEEE 802.3 标准规定的主要是OSI参考模型中的物理层(PHY)和数据链路层中的介质访问控…

【HZHY-AI300G智能盒试用连载体验】设置RKNN的开发环境

目录 安装RKNN工具 安装pip3 安装RKNN Toolkit Lite2 安装RKNPU2运行库 本文首发于电子发烧友论坛:【新提醒】【HZHY-AI300G智能盒试用连载体验】 智能工业互联网网关 - 北京合众恒跃科技有限公司 - 电子技术论坛 - 广受欢迎的专业电子论坛! (elecfans.com) 前…

kubevirt中disk的bus类型

在 KubeVirt 中,定义虚拟机中磁盘(disk)的时候,可以指定不同的总线(bus)类型,以确定磁盘如何与虚拟机中的虚拟硬件进行通信。以下是 KubeVirt 中常见的磁盘总线类型: Virtio 类型: v…

go语言day20 使用gin框架获取参数 使用自定义的logger记录日志

Golang 操作 Logger、Zap Logger 日志_golang zap-CSDN博客 一、 从控制器中获取参数的几种形式 1) 页面请求url直接拼接参数。 2) 页面请求提交form表单 3) 页面请求发送json数据,使用上下文对象c的BindJSON()方法接收数据…

SQL Server审计:深入掌握SQL Server Audit的高级应用

SQL Server审计:深入掌握SQL Server Audit的高级应用 SQL Server提供了强大的审计功能,允许数据库管理员(DBA)跟踪和记录数据库活动,确保数据库的安全性和合规性。SQL Server Audit是实现这一目的的关键工具之一。本文将详细介绍如何在SQL S…

CI/CD:Job failed: execution took longer than 1h0m0s seconds

简介:当在CI/CD配置运行Gitlab-runner流水线中,一般默认情况下,Job的执行时间默认为1小时,如果超出1小时,任务会中断。 历史攻略: 定时任务:Jenkins 容器化CICDLocust性能压测 容器化CICDSo…

Python学习和面试中的常见问题及答案

整理了一些关于Python和机器学习算法的高级问题及其详细答案。这些问题涵盖了多个方面,包括数据处理、模型训练、评估、优化和实际应用。 一、Python 编程问题 解释Python中的装饰器(Decorators)是什么?它们的作用是什么&#xf…

【C++ —— 认识哈希和unordered_set、unordered_map的介绍及模拟】

认识哈希和unordered_set、unordered_map的介绍及模拟 哈希表基础哈希的概念哈希表的基本操作 哈希冲突哈希冲突的定义哈希冲突的影响常见的哈希冲突的解决方法 哈希函数哈希函数的定义哈希函数的设计原则常见的哈希函数 unordered系列关联式容器hash模拟 哈希表基础 哈希的概…