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自定义,本示例设…

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阀值以…

爬虫入门学习

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

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…

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…

视频结构化从入门到精通——视频结构化主要技术介绍

视频结构化主要技术 1 视频接入 “视频接入”是视频结构化管道的起点(SRC Point)视频接入是视频结构化处理的第一步,它涉及将视频数据从各种采集源获取到系统中进行进一步处理。视频接入的质量和稳定性对后续的数据处理、分析和应用至关重要…

多参数遥测终端科技守护水电站生态流量下泄

随着我国水电事业的蓬勃发展,水电站在推动地方经济快速增长、缓解能源压力方面发挥了不可替代的作用。然而带来的生态环境问题日益凸显,因水电站下泄流量不足造成部分河段减水、脱水甚至干涸,影响了河流的正常生态功能和居民的生产、生活。因…

【硬件操作入门】2--GPIO与门电路、二极管三极管、LED电路与操作

【硬件操作入门】2–GPIO与门电路(二极管&三极管)、LED电路与操作 文章目录 【硬件操作入门】2--GPIO与门电路(二极管&三极管)、LED电路与操作一、GPIO与门电路1.1、GPIO的应用1.2、GPIO引脚操作1.2.1 设置引脚为GPIO功能…

day39(8/29)——harbor私有仓库管理

一、harbor私有仓库管理 是python的包管理工具,和yum对redhat的关系是一样的 yum -y install epel-release yum -y install python2-pip pip install --upgrade pip pip list pip 8x pip install --upgrade pip pip install --upgrade pip20.3 -i https://mirror…

RFID光触发标签在文件柜管理中的创新应用

在当今信息化时代,文件管理对于企业和机构的重要性不言而喻。传统的文件柜管理方式存在诸多问题,如查找文件困难、管理效率低下、安全性难以保障等。而 RFID 光触发标签技术的出现,为文件柜管理带来了全新的解决方案。 一、传统文件柜管理的…

Spring扩展点系列-@PostConstruct

简介 spring的Bean在创建的时候会进行初始化,而初始化过程会解析出PostConstruct注解的方法,并反射调用该方法。 PostConstruct 的使用和特点 只有一个非静态方法能使用此注解;被注解的方法不得有任何参数;被注解的方法返回值必…