Nginx 部署前端 Vue 项目实战指南

一、环境准备

在这里插入图片描述

1. 安装 Nginx

首先,需要在服务器上安装 Nginx。Nginx 是一款轻量级、高性能的 HTTP 和反向代理服务器。安装方式因操作系统而异。

  • Linux 系统(以 Ubuntu 为例)

    sudo apt-get update
    sudo apt-get install nginx
    
  • Windows 系统
    从 Nginx 官方网站下载安装包,按照安装向导进行安装。

2. 安装 Node.js

Vue 项目的运行依赖 Node.js 环境。访问 Node.js 官方网站(https://nodejs.org/en/),下载适合您操作系统的安装包并进行安装。安装完成后,在命令行中输入 node -vnpm -v 来验证安装是否成功。

3. 准备 Vue 项目

确保您有一个可以正常运行的 Vue 项目。如果还没有,可以使用 Vue CLI 来创建一个新项目。

npm install -g @vue/cli
vue create my-vue-project

在项目开发完成后,使用以下命令进行打包:

npm run build

打包完成后,会生成 dist 文件夹,用于后续的 Nginx 部署。

二、项目打包

(一)打包命令

在 Vue 项目中,可以使用 npm run build 命令来打包项目。在执行此命令之前,需要确保路由配置中的模式正确。如果使用了 history 模式,可能会在打包部署后出现问题,建议将其修改为 hash 模式或者直接注释掉 mode 这一配置项。

const router = new VueRouter({/*mode: 'history',*/mode: 'hash',routes: []
})

另外,还需要对项目中的一些配置文件进行修改,比如在 vue.config.js 文件中添加路径配置 publicPath: './',以确保打包后的资源路径正确。

(二)常见问题与解决

  • 路径报错:在打包过程中,可能会出现路径报错的情况。常见的解决方法是在 config/index.js 中,将 assetsPublicPath: '/' 修改为 assetsPublicPath: './'。如果项目中使用了自定义的打包配置文件,如 vue.config.js,也要确保其中的路径配置正确。
  • 页面空白:页面空白是打包后常见的问题之一。可能的原因包括路径配置错误、路由模式不正确等。路径配置方面,按照上述提到的修改 assetsPublicPath 的方法进行处理。路由模式上,如果使用了 history 模式且没有后端的相应配置,建议将其修改为 hash 模式。另外,还需要检查图片、字体等资源的路径是否正确,必要时在相关配置文件中进行调整。

三、Nginx 配置与部署

(一)Nginx 安装

  • Windows 系统
    您可以从 Nginx 官方网站下载安装包,然后按照安装向导进行安装。安装完成后,可在命令行中输入 nginx 启动 Nginx 服务。

  • Linux 系统(以 CentOS 为例)

    sudo yum install -y gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel
    sudo wget http://nginx.org/download/nginx-1.22.1.tar.gz
    sudo tar -zxvf nginx-1.22.1.tar.gz
    cd nginx-1.22.1
    sudo ./configure
    sudo make
    sudo make install
    
  • macOS 系统

    brew install nginx
    

(二)项目部署

首先,将打包生成的 dist 文件夹移动到 Nginx 的相关目录。在 Windows 系统中,通常为 C:\nginx\html;在 Linux 系统中,可能为 /usr/local/nginx/html

然后,修改 Nginx 的配置文件(通常为 nginx.conf)。找到 server 部分,设置项目的根目录和相关路由。

最后,重新启动 Nginx 服务使配置生效。

(三)配置修改

要修改 Nginx 的配置文件,例如修改端口,可在 nginx.conf 文件中找到 listen 指令,将默认的 80 端口修改为您想要的端口,如 listen 8080;

修改服务名称,在 server_name 指令后指定新的名称,如 server_name myvueproject.com;

修改完成后,保存配置文件,并在命令行中执行相应命令重启 Nginx 服务。在 Linux 系统中,通常使用 sudo systemctl restart nginx 命令;在 Windows 系统中,可通过任务管理器结束 Nginx 进程后重新启动。

四、访问与验证

(一)启动 Nginx 服务

  • Windows 系统
    按组合键【win+r】打开 “运行” 对话框,输入 cmd,回车打开 cmd 命令行窗口。在打开的 cmd 命令窗口中利用 cd 命令切换到 Nginx 服务安装的目录。输入命令:start nginx.exe,回车,即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。

  • Linux 系统

    sudo systemctl start nginx
    sudo /etc/init.d/nginx start
    

    可以使用以下命令检查服务状态:

    sudo systemctl status nginx
    sudo /etc/init.d/nginx status
    
  • macOS 系统
    打开终端,输入 brew services start nginx 启动 Nginx 服务。

(二)通过浏览器访问验证部署是否成功

在浏览器地址栏中输入 http://localhost(如果修改了端口,则输入 http://localhost:端口号)。如果出现 Vue 项目的页面,说明部署成功。如果出现 404 错误或者其他错误页面,需要检查 Nginx 配置、项目路径等是否正确。

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

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

相关文章

【Android】Material Design编写更好的UI

Toolbar 对于控件ActionBar我们非常熟悉,就是我们常见的标题栏,但ActionBar只能位于活动的顶部,因此我们更建议使用Toolbar。在新建一个项目的时候都是默认显示ActionBar,我们要使用Toolbar就需要先将标题栏改为不显示 先来看看…

HMI触屏网关-VISION如何与Node-red通信

上文:HMI触屏网关-VISION如何与Modbus TCP从机通信-CSDN博客 1. Node-red启用HTTP监听 HTTP监听,用于模拟WebAPI服务端,接收WebAPI客户端GET请求。 启用HTTP监听服务,选择请求方式GET;URL自定义,本示例设…

在 Maven 的 POM 文件中配置 npm 镜像源

在使用 Maven 构建前端项目时,可能会遇到网络问题,导致 Node.js 或 npm 依赖无法下载,特别是在国内网络环境中。如果你在使用 frontend-maven-plugin 插件来管理 Node.js 和 npm,那么通过配置镜像源可以有效解决这些问题。本文将介…

LavaDome:一款基于ShadowDOM的DOM树安全隔离与封装工具

关于LavaDome LavaDome是一款针对HTML代码安全和Web安全的强大工具,该工具基于ShadowDOM实现其功能,可以帮助广大研究人员实现安全的DOM节点/树隔离和封装。 在当今的Web标准下,尚无既定方法可以安全地选择性地隔离DOM子树。换句话说&#x…

【ceph学习】rgw网关进程如何启动

rgw 网关进程启动 主要在rgw_main.cc的main函数中,主要涉及一些关键线程启动、前端服务器(beast等)启动、后端存储模块启动(rados)、perf和log启动等。 流程图关键节点如下: 1、beast的启动 2、rados的启…

Android Camera系列(一):SurfaceView+Camera

心行慈善,何需努力看经—《西游记》 本系列主要讲述Android开发中Camera的相关操作、预览方式、视频录制等,项目结构代码耦合性低,旨在帮助大家能从中有所收获(方便copy :) ),对于个人来说也是一…

vue 批量导出pdf 压缩包 zip

vue 批量导出pdf 压缩包 zip 使用插件 html2canvas jspdf jszip (百度ai搜出来的是zip-js 这个没法安装) file-saver 思路: 1.使用 html2canvasjspdf 将页面转图片转pdf(这个怎么转的可以网上搜下很多) 2.利用jszipfil…

【免费分享】易上手的STM32多核心开发板资料包一网打尽,教程+课件+视频+项目+源码

想要深入学习STM32开发吗?现在机会来了!我们为初学者们准备了一份全面的资料包,包括原理图、教程、课件、视频、项目、源码等,所有资料全部免费领取,课程视频可试看(购买后看完整版)&#xff0c…

PostgreSQL技术内幕7:PostgreSQL查询编译

文章目录 0.简介1.整体过程2.查询分析2.1 Lex2.2 Yacc2.3 PG词法分析和语法分析介绍2.4 PG语义分析 4.查询优化4.1 预处理4.1.1 提升子链接和子查询4.1.2 预处理表达式4.1.3 处理HAVING子句 4.2 改进查询树4.2.1 路径生成4.2.2 代价估计 4.3 计划生成 0.简介 一次完整的SQL执行…

STM32基础篇:PWR

PWR简介 PWR(Power Control),为电源控制模块,负责管理STM32内部的电源供电部分,可以实现可编程电压监测器和低功耗模式的功能。 1、可编程电压监测器 简称PVD,可以监控VDD电源电压。当VDD下降到PVD阀值以…

Spring Boot 整合 Sentinel 实现流量控制

在微服务架构中,流量控制是保障系统稳定性和高可用性的关键技术之一。阿里巴巴开源的 Sentinel 是一款面向分布式系统的流量防护组件,旨在从流量控制、熔断降级、系统负载保护等多个维度保障服务的稳定性。本文将详细介绍如何在 Spring Boot 项目中整合 …

挑战黑神话, 不升级武器通关

第一关随便打打 第二关,提前杀了疯虎,加攻击, 并且自己的点也早点点上攻击力,推荐还是拿了定风珠打, 否则沙尘暴不好处理,需要多打几个回合.玲珑内丹可以去第一关刷小怪 第三关.早点去拿禁 第四关.躲好蝎子的甩尾之后上去劈棍xyy即可. 第五关. 打了这个红孩儿很久,可以考虑跑蓄…

爬虫入门学习

流程 获取网页内容 HTTP请求 Python Requests解析网页内容 HTML网页结构 Python Beautiful Soup储存或分析数据 HTTP (Hypertext Transfer Protocol) 客户端和服务器之间的请求-响应协议 Get方法:获得数据 POST方法:创建数据 HTTP请求 请求行 方法类型…

CPP八股文-模板类.内存管理,指针

为什么模板类的定义需要放在头文件中? 无论是类模板还是函数模板,都是一个蓝图,本身不是一个类或函数,编译器用模板产生指定的类或函数的特定类型版本。产生模板的特定类型实例的过程称为模板的实例化。所以一般将模板类放在头文…

rv1126-rv1109-mkcramfs-mkfs.cramfs-打包文件系统

事情是这样的: 定制了文件系统打包功能;然后我是根据这个指令 fakeroot mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img 起因就是这个fakeroot; 不加的话打出来的rootfs.img是没有用户权限的 然后我根据fakeroot mkfs.cramfs ro…

vue仓库的使用

Vue仓库通常指的是使用Vue CLI创建的项目仓库,它包含了项目的所有源代码、配置文件以及依赖项。以下是如何使用Vue仓库的一些基本步骤和最佳实践: 创建Vue项目 首先,你需要安装Vue CLI,然后使用它来创建一个新的Vue项目。 npm i…

AcWing算法基础课-785快速排序-Java题解

大家好,我是何未来,本篇文章给大家讲解《AcWing算法基础课》785 题——快速排序。这篇文章介绍了使用快速排序算法对整数数列进行排序的方法,包括选择基准元素、分区操作和递归排序子数组。通过详细的步骤和示例,解释了快速排序的…

MySQL之数据库基础

目录 一、数据库 1、基本概念 2、常见的数据库 3、MySQL数据库 连接MySQL服务器 数据逻辑存储 二、数据库和表的本质 三、SQL语句 四、服务器,数据库,表的关系 五、存储引擎 查看存储引擎 一、数据库 1、基本概念 一般来说,数据库…

es映射配置(_mapping)

文章目录 1、创建映射字段2、查看映射关系 1、创建映射字段 PUT /索引库名/_mapping {"properties": {"字段名": {"type": "类型","index": true,"store": true,"analyzer": &q…

Vue转React踩坑记录——useEffect组件卸载时使用useState定义的值返回undefined

bug背景:vue转react踩坑。在vue数据是响应式的,卸载时不会出现数据已经赋值但是卸载是undefined情况,除非手动更改为undefined。而在react流行的hooks写法,你要一直操作数据,react提供的useEffect方法的return 里其实就…