使用 Nginx 部署前端 Vue.js 项目

引言

Vue.js 是一个流行的前端框架,用于构建用户界面。当涉及到生产环境的部署时,选择一个合适的 web 服务器是非常重要的。Nginx 是一个高性能的 HTTP 和反向代理服务器,非常适合用来部署前端应用程序。本文将指导你如何使用 Nginx 部署一个 Vue.js 项目,并确保静态资源能够正确地被加载。

1. 准备工作

1.1 环境要求

  • Nginx:确保已经在你的服务器上安装了 Nginx。
  • Vue.js 项目:确保你的 Vue.js 项目已经构建完成,并且生成了静态文件。
  • 服务器:拥有一台可以访问互联网的服务器,并且有权限修改 Nginx 配置文件。

1.2 构建 Vue.js 项目

首先,你需要构建你的 Vue.js 项目。使用 Vue CLI 或者其他打包工具,运行以下命令来生成静态文件:

sh

1npm run build

构建完成后,你会得到一个 dist 目录,其中包含了所有静态资源文件。

2. 配置 Nginx

2.1 复制静态文件

dist 目录下的所有文件复制到 Nginx 的静态文件服务目录中。通常这个目录是 /usr/share/nginx/html 或者 /var/www/html,具体路径取决于你的操作系统和 Nginx 的安装位置。

sh

1cp -r dist/* /usr/share/nginx/html/

2.2 编辑 Nginx 配置文件

编辑 Nginx 的配置文件,通常位于 /etc/nginx/nginx.conf/etc/nginx/sites-available/default。你需要配置一个 location 块来处理 Vue.js 应用程序的路由。

以下是示例配置:

nginx

1server {
2    listen 80;
3    server_name example.com www.example.com; # 替换为你的域名
4
5    root /usr/share/nginx/html; # 静态文件所在目录
6
7    # 设置 index.html 作为默认页面
8    index index.html;
9
10    # 配置路由重写规则,使所有请求指向 index.html
11    location / {
12        try_files $uri $uri/ /index.html;
13    }
14
15    # 配置 SSL/TLS 如果需要
16    # listen 443 ssl;
17    # ssl_certificate /etc/nginx/ssl/example.com.crt;
18    # ssl_certificate_key /etc/nginx/ssl/example.com.key;
19
20    # 配置静态资源缓存
21    location ~* \.(jpg|jpeg|png|gif|js|css|ico|ttf|woff|svg)$ {
22        expires 30d;
23        add_header Cache-Control "public";
24    }
25
26    # 错误页配置
27    error_page 404 /index.html;
28
29    # 日志格式
30    access_log /var/log/nginx/example.access.log;
31    error_log  /var/log/nginx/example.error.log;
32}

2.3 测试并重启 Nginx

保存配置文件后,测试配置是否有语法错误:

sh

1nginx -t

如果没有错误,重启 Nginx 使配置生效:

sh

1sudo systemctl restart nginx

3. 验证部署

打开浏览器,输入你的域名,检查是否能够正确访问你的 Vue.js 应用。如果一切顺利,你应该能看到你的应用程序正在运行。

4. 高级配置

4.1 SSL/TLS 配置

如果你需要为你的网站添加 HTTPS 支持,可以在 Nginx 配置文件中启用 SSL/TLS,并上传你的证书文件。

4.2 自定义错误页

你可以自定义错误页来更好地适应你的应用风格。只需要在 dist 文件夹下创建相应的错误页文件,并在 Nginx 配置中指定即可。

4.3 缓存配置

对于静态资源,你可以配置 Nginx 来使用更长时间的缓存,这样可以减少服务器的负载,并提高页面加载速度。

5. 总结

通过上述步骤,你已经成功地使用 Nginx 部署了一个 Vue.js 应用。Nginx 的高效性和灵活性使其成为部署前端应用程序的理想选择。如果你还有其他需求,比如使用反向代理、负载均衡等高级功能,可以继续深入学习 Nginx 的相关文档。

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

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

相关文章

ACM个人模板总结

一切的开始 初始模板 // o2 o3 优化防止卡常 #pragma GCC optimize(2) #pragma GCC optimize(3) #include <bits/stdc.h> using namespace std; #define lowbit(x) (x&(-x)) #define endl "\n" #define LF(x) fixed<<setprecision(x)// c 保留小…

在线演示文稿应用PPTist本地化部署并实现无公网IP远程编辑PPT

文章目录 前言1. 本地安装PPTist2. PPTist 使用介绍3. 安装Cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统环境本地部署开源在线演示文稿应用PPTist&#xff0c;并结合cpolar内网穿透工具实现随时随地远程访问与使用该项目。 PPTist …

C#编程语言及.NET 平台快速入门指南

Office Word 不显示 Citavi 插件&#xff0c;如何修复&#xff1f;_citavi安装后word无加载项-CSDN博客 https://blog.csdn.net/Viviane_2022/article/details/128946061?spm1001.2100.3001.7377&utm_mediumdistribute.pc_feed_blog_category.none-task-blog-classify_ta…

CSS选择器:一文带你区分CSS中的伪类和伪元素!

一、伪类选择器 1、什么是伪类选择器 伪类选择器&#xff0c;顾名思义&#xff0c;是一种特殊的选择器&#xff0c;它用来选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的&#xff0c;而是由用户行为&#xff08;如点击、悬停&#xff09;或元素的状态&a…

Java SpringBoot构建传统文化网,三步实现信息展示,传承文化精髓

✍✍计算机毕业编程指导师** ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java…

大道至简,大厂官网基本都走简洁化设计路线。

「大道至简」是一种设计理念&#xff0c;强调设计应该追求简洁、直观、易用&#xff0c;而不是过多的修饰和繁琐的细节。 对于大厂的官网来说&#xff0c;简洁化设计路线的选择可能有以下几个原因&#xff1a; 1. 更好的用户体验&#xff1a; 简洁的设计可以让用户更容易地理…

磁盘调度管理中移臂调度和旋转调度

在磁盘调度管理中&#xff0c;移臂调度和旋转调度是两种不同的优化调度方法&#xff0c;用来提高磁盘读写效率。我们可以通过以下两种方式来理解它们&#xff1a; 1. 移臂调度&#xff08;Seek Scheduling&#xff09; 移臂调度是指磁盘驱动器的磁头在不同的柱面&#xff08;…

NTFS硬盘支持工具Paragon NTFS for Mac 15.4.44 中文破解版

Paragon NTFS for Mac 15.4.44 中文破解版是一个底层的文件系统驱动程序,专门开发用来弥合Windows和Mac OS X之间的不兼容性&#xff0c;通过在Mac OS X系统下提供对任何版本的NTFS文件系统完全的读写访问服务来弥合这种不兼容性。为您轻松解决Mac不能识别Windows NTFS文件难题…

华为鸿蒙系统和安卓的区别

华为鸿蒙系统和安卓系统在多个方面存在显著差异&#xff0c;以下是对两者区别的详细分析&#xff1a; 一、开发商与背景 鸿蒙系统&#xff1a;由中国的华为公司主导开发&#xff0c;旨在创造一个超级虚拟终端互联的世界&#xff0c;将人、设备、场景有机地联系在一起。自2012…

【深度学习】线性回归的从零开始实现与简洁实现

前言 我原本后面打算用李沐老师那本《动手学深度学习》继续“抄书”&#xff0c;他们团队也免费提供了电子版(https://zh-v2.d2l.ai/d2l-zh-pytorch.pdf)。但书里涉及到代码&#xff0c;一方面展示起来不太方便&#xff0c;另一方面我自己也有很多地方看不太懂。 这让我开始思…

Pepper佩盼尔wordpress模板

Pepper佩盼尔WordPress模板是一款专为追求简洁、现代和专业外观的网站设计者和开发者打造的高品质主题。它以简站为主题&#xff0c;强调“让建网站更简单”的理念&#xff0c;旨在为用户提供一个易于使用、功能丰富的平台来构建他们的在线业务或个人网站。 模板特点包括&…

手机玩黑神话悟空二周目 GameViewer远程助你手机畅玩黑神话悟空 解锁全成就全收集

用手机摸鱼完成黑神话悟空二周目全收集、成就全解锁&#xff0c;实现随时随地玩黑神话悟空&#xff0c;你可以用网易GameViewer远程。 这款远程控制软件专为游戏玩家打造&#xff0c;不管你是上班族&#xff0c;还是学生党&#xff0c;都可以用它在手机、平板上玩黑神话悟空&am…

Vue输入框模糊搜索的多种写法

&#xff08;1&#xff09;模板方案 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</…

音频如何低延时回声消除与降噪篇保姆级教程

目录 1 回声消除技术 1.1 回声产生的原因 1.2 传统回声消除方法 1.3 先进的回声消除算法 2 降噪技术 2.1 降噪技术的原理与方法 2.2 传统降噪方法 2.3 先进的降噪算法 3 低延时处理技术 3.1 低延时处理的重要性 3.2 低延时回声消除技术 3.3 低延时降噪技术 4 调试…

Netty系列-2 NioServerSocketChannel和NioSocketChannel介绍

背景 本文介绍Netty的通道组件NioServerSocketChannel和NioSocketChannel&#xff0c;从源码的角度介绍其实现原理。 1.NioServerSocketChannel Netty本质是对NIO的封装和增强&#xff0c;因此Netty框架中必然包含了对于ServerSocketChannel的构建、配置以及向选择器注册&am…

谈一谈JVM的GC(垃圾回收)

JVM&#xff08;Java Virtual Machine&#xff09;的GC&#xff08;Garbage Collection&#xff0c;垃圾回收&#xff09;是Java语言的一个重要特性&#xff0c;它负责自动管理内存&#xff0c;释放那些不再被使用的对象所占用的内存空间。以下是对JVM GC的详细介绍&#xff1a…

Python 全栈系列266 Kafka服务的Docker搭建

说明 在大量数据处理任务下的缓存与分发 这个算是来自顾同学的助攻1&#xff0c;我有点java绝缘体的体质&#xff0c;碰到和java相关的安装部署总会碰到点奇怪的问题&#xff0c;不过现在已经搞定了。测试也接近了kafka官方标称的性能。考虑到网络、消息的大小等因素&#xff0…

风机设计基础

目录 1、风机分类按气体出口压力&#xff08;或升压&#xff09;来进行风机分类按风机全压来进行分类 2、风机定律及效率、功率、压力计算风机轴功率与扭矩关系&#xff1a;风机全压、静压效率计算公式&#xff1a;全压、动压、静压计算公式&#xff1a; 3、风机噪声1、离散噪声…

修改jupyter notebook 默认浏览器(不动配置文件,改系统默认浏览器)

最开始把联想浏览器切到EDGE就是用的修改系统的默认浏览器。不知怎么的现在搜到的方法都是在说修改配置文件&#x1f613;。 不想动配置文件&#xff0c;平时对默认浏览器没有特殊要求的&#xff0c;可以用这个方法。 这里是把默认浏览器改成联想浏览器&#xff0c;电脑也是联…

macos 系统 降级, 重装, 升级图文教程

最近一不小心mac被升级到了最新版本, 在使用vscode的时候经常卡顿,于是有了降级macos的想法! 于是就有了这macos的系统降级 , 重装, 升级图文教程. 本文重点介绍macos降级, 重装过程, 至于升级, 这个一不小心就会被升级(通过应用商店)基本上都是自动升级的,所以不做更多说明. …