vue.js+nginx+openresty

Openresty 中部署Vue项目 不同于原生nginx部署和宝塔面板中的nginx方式部署vue项目,在openresty中直接代理vue项目会出现点击不同的菜单(url)返回404的问题,这是因为你的openresty还没有配置好。,在里面写天如下内容(重点!这个配置是vue路由正确的关键)(即你刚才上传并解压缩的vue项目文件夹)中直接切换打开网站所在文件夹。好的vue文件夹并解压缩。 阅读详情

1、安装vue.js

安装 node.js
安装前准备:
$yum install libtool automake autoconf gcc-c++ openssl-devel
下载源码:
$wget https://nodejs.org/dist/v6.9....
解压缩:
$tar -zxvf node-v6.9.1.tar.gz
编译安装:
$./configure --prefix=/app/server
$make && make install
因为指定了安装目录,安装完成之后,需要把执行文件加到 /etc/profile 里才能全局使用。

 安装 vue-cli 命令行工具
如果访问外网比较慢,可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回车之后,我就可以可以快乐的用 cnpm 替代 npm

$ vue init webpack my-project
$ cd my-project
$ cnpm install
$ cnpm run dev

2、安装openresty

3、将vue项目部署到nginx(此处是openresty搭建的nginx)、修改配置文件

进入到项目目录运行
$npm run build
根据实际情况修改nginx.conf配置文件
例如
 worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    include       vhost/*.conf;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
}
其中conf/vhost/目录下vue.conf
server
{
    listen 8090;
    server_name localhost;
    index index.html index.htm index.php;
    root /var/www/html/find;
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }
}
将first_project目录下的dist目录下文件复制到/var/www/html/find/目录下。
启动nginx服务。 OK。
Nginx实战精要:从HTTP协议引擎到生产级流量网关 Nginx本质上是高性能HTTP协议引擎,而非传统Web服务器——它通过事件驱动模型深度优化epoll、零拷贝sendfile和七层负载均衡,实现单机3万+并发连接与毫秒级请求调度。其核心价值在于协议转换(HTTPS/HTTP/2/gRPC)、动静分离、反向代理与前置安全防护,广泛应用于高流量网站、微服务网关及边缘计算场景。作为现代Web架构的‘沉默交通指挥员’,Nginx在真实生产中承担着TLS卸载、真实IP透传、WebSocket升级、健康检查与零停机发布等关键任务。本文聚焦Nginx的协议级原理、源码 阅读详情

相关推荐

Nginx location匹配原理:四类语法、优先级规则与线上避坑指南

Nginx的location是Web服务器实现URL路由的核心机制,其本质是一套基于匹配类型、字符串长度和执行顺序的确定性调度算法。它并非线性扫描配置,而是分阶段执行:先标准化URI,再并行构建前缀与正则两套匹配链表,最终通过精确匹配(=)、强制前缀(^~)、普通前缀(/path)和正则(~)四类语法进行优先级裁决。这种设计以牺牲配置直觉为代价,换取毫秒级路由性能,广泛应用于API网关、静态资源分发与灰度发布等高并发场景。理解location匹配逻辑,是保障反向代理、缓存策略与安全路由稳定落地的技术前提。

weixin_34393428的博客 355

史上最全springboot+vue部署之nginx( openresty)安装配置自启动

openresty介绍: Nginx 采用一个 master 进程管理多个 worker 进程(master-worker)模式,基本的事件处理都在 woker 中,master 负责一些全局初始化,以及对 worker 的管理。在OpenResty中,每个 woker 使用一个 LuaVM,当请求被分配到 woker 时,将在这个 LuaVM 里创建一个 coroutine(协程)。协程之间数据隔离,每个协程具有独立的全局变量_G。OpenResty致力于将服务器应用完全运行与nginx中,充分利用ngi

weixin_42932188的博客 1672

lor:一种基于OpenResty的lua快速,简约的Web框架

lor:一种基于OpenResty的lua快速,简约的Web框架

Dockerfile的多级构建Vue+Nginx(openresty)

Dockerfile的多级构建Vue+Nginx(openresty)

Xavider的博客 2374

openresty官方学习资料

章亦春亲自书写的openresty官方学习资料,包含OpenResty 入门到精通、OpenResty 核心开发、OpenResty 在小语言下的开发。

海康SDK回调PS流解析实战:从字节流到前端H264播放的完整流程

本文详细介绍了海康SDK回调PS流解析的完整流程,从字节流获取到前端H264播放的实现。涵盖SDK初始化、PS流数据结构解析、H264裸流提取、WebSocket传输及前端播放器集成等关键步骤,为视频监控系统开发提供实用指导。

weixin_29061531的博客 200

部署vue项目到线上nginx

部署vue项目到nginx 1.项目打包 打包完成以后就会在项目根目录生成一个dist的文件夹 npm run build 2.将打包以后的dist文件夹压缩为zip文件,然后ssh工具将dist.zip文件传输到服务器,传输成功以后将当前的dist.zip文件通过unzip dist.zip 解压 修改nginx.conf 文件 server { listen 80; ...

一条路走到黑 975

WKWebView 白屏问题,WKWebView request body丢失问题

1,WKWebView 白屏问题 WKWebView 自诩拥有更快的加载速度,更低的内存占用,但实际上 WKWebView 是一个多进程组件,Network Loading 以及 UI Rendering 在其它进程中执行。初次适配 WKWebView 的时候,我们也惊讶于打开 WKWebView 后,App 进程内存消耗反而大幅下降,但是仔细观察会发现,Other Process 的内存占用会...

weixin_37543822的博客 734

Vue+Springboot 前后端分离的项目如何部署?

本文分享了Vue+SpringBoot前后端分离博客系统的部署流程。主要内容包括:1)JDK21和Node环境的安装配置;2)MySQL数据库初始化;3)本地前后端项目的运行方法;4)后端项目打包部署到Linux服务器,包括jar包运行、nohup后台运行和systemd服务管理;5)前端项目打包部署,使用Nginx/OpenResty搭建静态站点,配置反向代理和解决Vue路由404问题;6)完整的Nginx配置文件示例。文章还预告了后续将补充Docker容器化部署内容。该部署流程适用于个人项目,企业级项目

qq_45804378的博客 1288

告别版本过低提示!微信3.9登录修复与聊天记录无缝迁移全攻略

本文详细解析了微信3.9版本过低提示的根源,并提供了完整的修复方案和聊天记录迁移指南。通过专用修复工具绕过版本检测,以及新旧版本聊天记录目录对比,帮助用户实现无缝迁移。特别提醒备份重要数据,确保操作安全。

weixin_42535461的博客 3117

手把手教你用Python+GDAL处理0.5米吉林一号卫星影像(附代码)

本文详细介绍了如何使用Python和GDAL处理吉林一号0.5米高分辨率卫星影像,包括环境配置、数据预处理、分辨率融合、植被指数计算及地物分类等关键步骤。通过实战代码示例,帮助开发者高效处理大尺寸遥感数据,解决资源崩溃和算法选择问题,提升遥感影像分析能力。

weixin_30892037的博客 126

从Vue.js到OpenResty:中国顶级程序员的技术哲学与工程实践

在软件工程领域,开源框架与高性能基础设施是支撑现代应用开发的两大基石。框架通过提供标准化开发范式提升效率,而基础设施则通过底层优化保障系统性能。以Vue.js为代表的渐进式框架,通过响应式系统和组件化设计,降低了前端开发门槛,其devtools工具更提供了直观的调试体验。OpenResty则通过将Nginx与LuaJIT深度集成,实现了网关层逻辑的动态化处理,为微服务架构提供了高性能解决方案。这些技术不仅体现了对开发者体验的深刻洞察,更展现了在工程实践中平衡创新与稳定的能力。随着AI开源模型的兴起,技术民主

weixin_34056162的博客 515

数据字典实战:如何用Excel快速搭建你的第一个数据字典(附模板下载)

本文针对中小团队在软件开发中面临的术语不一致问题,提供了一套使用Excel快速搭建数据字典的实战指南。文章详细讲解了核心字段设计、填充示例、高阶技巧及团队协作维护流程,旨在通过这一轻量级工具统一团队共识、提升开发效率,并附有实用模板下载。

weixin_29303701的博客 380

最新2024最新Nginx教程全面详解,从入门到实践(Nginx快速上手),不了解这些多线程的基础知识很难学懂前端

根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记第四章:Nginx高级数据结构第五章:Nginx 开发综述第六章:Nginx 模块体系第七章:Nginx HTTP框架综述第八章:Nginx HTTP请求处理第九章:Nginx HTTP请求转发第十章:Nginx HTTP子请求第十一章:Nginx变量。

2301_82244509的博客 460

(王道408考研数据结构)第八章排序-第一节:排序综述

文章目录一:排序一览二:简单插入排序(1)基本思想 一:排序一览 排序方法 类别 本文 时间复杂度 是否稳定 直接插入排序 插入排序 跳转 O(n2)O\left ( n^{2}\right )O(n2) 是 二叉树深度 简单 跳转 LeetCode 递归 翻转二叉树 简单 跳转 LeetCode 递归 相同的树 简单 跳转 LeetCode 递归 是否为子树 简单 跳转 LeetCode 递归 对称二叉树 简单 跳转 LeetCode 递归 平衡二叉树 简单 跳转

快乐江湖的博客 5487

从 VS Code 登录 ABAP Destination,一次把前后端连接跑通

最近很多 ABAP 开发者开始把 VS Code 纳入日常开发环境,原因很直接,VS Code 的轻量体验、命令面板、文件树、插件生态和 AI 编程能力,已经深深影响了现代开发者的工作方式。SAP 官方发布的 ABAP Development Tools for VS Code,也把 ABAP Cloud 开发模型带进了这个编辑器里。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 222

一 项目配置

一、openresty nginx 配置(openresty安装参考https://openresty.org/cn/)1、http内client_max_body_size 100M; #大文件传送client_body_buffer_size 128k;lua_package_path "/opt/openresty/lualib/?.lua;;"; #lua 模块...

Salted fish in hand, I have the world. 451

ardupilot 获取避障传感器数据

本节主要记录自己学ardupilot的避障代码过程,首先看下怎么注册避障传感器,然后怎么获取避障数据。

陌城烟雨 5524

OpenResty系列之Nginx反向代理与负载均衡

Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器什么是反向代理?反向代理(Reverse Proxy)方式是指以代理服务器来接受 internet 上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给 internet 上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

算法小生 1905

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

openresty+orange+nginx+ueditor 修复文件图片上传

最近公司开发文章功能,使用了ueditor 前端使用 vuejs 后台使用php 服务器 openresty+orange+nginx+centos 下面是nginx的配置 server { listen 80; server_name baidu.com; proxy_read_timeout 600; # 秒 location = /favi...

daily886的博客 549

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

尹吉峰:使用 OpenResty 搭建高性能 Web 应用

2019 年 8 月 31 日,OpenResty 社区联合又拍云,举办 OpenResty × Open Talk 全国巡回沙龙·成都站,原贝壳找房基础架构部工程师尹吉峰在活动上做了《使用 OpenResty 搭建高性能 Web 应用 》的分享。 OpenResty x Open Talk 全国巡回沙龙是由 OpenResty 社区、又拍云发起,邀请业内资深的 OpenResty 技术专家,分享...

qq_36342338的博客 1408

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

【从零认识Nginx】个人理解Nginx的保姆级教程

【从零认识Nginx】个人理解Nginx的保姆级教程

2303_80850235的博客 1194

使用OpenResty搭建DataEase视频服务器

DataEase搭配视频服务器,实现人人可用的可视化数据平台。

FIT2CLOUD飞致云的博客 1070

Nginx核心架构、配置详解与性能调优实战指南

在构建高并发、高性能的Web服务架构时,理解Web服务器的核心原理至关重要。事件驱动与非阻塞I/O模型是现代高性能服务器的基石,它通过高效管理大量并发连接,避免了传统多线程模型的资源开销。这一原理催生了反向代理、负载均衡等关键技术,它们对于实现系统的高可用性、可扩展性以及安全防护具有核心价值,广泛应用于微服务网关、API管理和静态资源分发等场景。本文聚焦于Nginx这一广泛使用的实现,深入解析其多进程架构、配置指令系统,并提供负载均衡、安全加固等实战配置方案与性能调优技巧,帮助开发者构建稳健的线上服务。

weixin_34166472的博客 303

Nginx解决高并发

基于Nginx构建动静分离架构 什么是动静分离 动静就是将动态资源(jsp/ftl)与静态资源(img/css/js)分开,从而提高网站响应的速度; nginx作为静态资源服务器比tomcat响应吞吐很多; 动静分离与前后分离区别 前后分离 将前端业务逻辑与后端完全分开 比如 vue+SpringBoot架构 动静分离 将静态资源资源与动态资源分开部署; 基于Nginx构建动静分离架构 主要有两种方案 基于location判断前缀,项目名称; 基于location判断后缀; 本地获取图片 locati

weixin_44044929的博客 640

跨域问题以及关于Nginx的一些内容

当前URl请求URL是否跨域原因否本域(协议、域名、端口号相同)是协议不同(http、https)是域名不同(zhihu、baidu)是端口号不同(8080、9090)根据上面的表,总的来说就是协议主机端口号三者任意一个不同就是跨域。

Fishermen_sail的博客 1209
下一篇: CentOS 7之Mysql基本安装、使用(备忘)
Malloc_New
博客等级 码龄11年 0粉丝 19原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值