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

相关推荐
Slow菜鸟1 小时前
ES5 vs ES6:JavaScript 演进之路
前端·javascript·es6
小冯的编程学习之路1 小时前
【前端基础】:HTML
前端·css·前端框架·html·postman
Jiaberrr2 小时前
Vue 3 中搭建菜单权限配置界面的详细指南
前端·javascript·vue.js·elementui
懒大王95272 小时前
uniapp+Vue3 组件之间的传值方法
前端·javascript·uni-app
烛阴3 小时前
秒懂 JSON:JavaScript JSON 方法详解,让你轻松驾驭数据交互!
前端·javascript
拉不动的猪3 小时前
刷刷题31(vue实际项目问题)
前端·javascript·面试
zeijiershuai3 小时前
Ajax-入门、axios请求方式、async、await、Vue生命周期
前端·javascript·ajax
恋猫de小郭3 小时前
Flutter 小技巧之通过 MediaQuery 优化 App 性能
android·前端·flutter
只会写Bug的程序员3 小时前
面试之《webpack从输入到输出经历了什么》
前端·面试·webpack
拉不动的猪4 小时前
刷刷题30(vue3常规面试题)
前端·javascript·面试