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 下载、安装与运行

相关推荐
小七蒙恩17 分钟前
vue elementUI Plus实现拖拽流程图,不引入插件,纯手写实现。
vue.js·elementui·流程图
yqcoder20 分钟前
html 中前缀的 data-开头的元素属性是什么
开发语言·前端·javascript
mr_cmx28 分钟前
vite 多环境变量配置
前端·vue.js
小茗同学阿41 分钟前
如何实现分片上传功能:基于 Vue 和 iView 上传组件的详细教程
前端·vue.js·view design
vvw&1 小时前
如何在 Ubuntu 22.04 上部署 Nginx 并优化以应对高流量网站教程
linux·运维·服务器·后端·nginx·ubuntu·性能优化
轻口味1 小时前
【每日学点鸿蒙知识】组件对象做参数、2D在子线程中使用、Tabs组件联动、Web组件获取焦点、Text加载藏文
前端·华为·harmonyos
零点七九1 小时前
mac环境下VSCode的环境配置
前端·vue.js·vscode·macos
Traced back1 小时前
vue3+TS+vite中Echarts的安装与使用
javascript·vue.js·echarts
西西偷西瓜1 小时前
云效流水线使用Node构建部署前端web项目
运维·前端·自动化
mosen8681 小时前
【JS】期约的Promise.all()和 Promise.race()区别
开发语言·前端·javascript