Nginx运行Vue项目:基本运行

需求

在Nginx服务器中,运行Vue项目。

说明

Vue项目打包生成的生产文件,是无法直接在浏览器打开的。需要放到Nginx服务器中,才能够访问。

本文章只介绍最基本的情况:Nginx中运行一个Vue项目。

实际生产环境,一个Nginx服务器中,会运行多个Vue项目。这需要配置,本文暂不介绍。

运行项目

将Nginx服务器启动,然后将Vue包放置到对应的目录,就能够在浏览器访问到Vue项目的页面了。

Vue项目放置的位置

Vue项目打包生成的文件,放在Nginx服务器的 html 目录下。

打开Nginx服务器

进入Nginx所在目录,输入如下命令

bash 复制代码
start nginx

示例如下:

页面查看

在浏览器输入 localhost ,打开Vue项目的首页。

Vue项目启动并访问成功,示例如下:

参考

Nginx 下载、安装与运行

相关推荐
智码看视界2 小时前
老梁聊全栈系列:Vue3核心与组合式API深度解析
javascript·vue.js·ecmascript
原则猫12 小时前
HOOKS 背后机制
前端
码语智行12 小时前
首页导航跳转功能深度解析-系统内和系统外
前端
阿猫的故乡13 小时前
Vue过渡动画从入门到装X:淡入淡出、滑动、列表动画、第三方库全搞定
前端·javascript·vue.js
裕波13 小时前
Vue&ViteConf 2026 将于 7 月 18 日在上海举办,尤雨溪将现场发表主题演讲
vue.js·vite
IManiy13 小时前
总结之Vibe Coding前端骨架
前端
JS菌13 小时前
AI Agent 沙箱双层防护体系:从权限过滤到内核隔离的完整实现
前端·人工智能·后端
Aphasia31113 小时前
从输入URL到页面展示全流程
前端·面试
我叫黑大帅14 小时前
前端如何竖屏固定视口背景
前端·javascript·面试
小黑蛋学java14 小时前
Nginx 接口耗时 Prometheus + Grafana 监控实施方案
运维·nginx·负载均衡·grafana·prometheus