nginx启动vue_nginx下部署vue项目的方法步骤
今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来。
首先要去nginx官网下下载nginx:
下载下来会是一个解压包,解压到你想放的文件夹下
运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了:
然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf
点击进去然后找到一个nginx.conf的文件
然后把它用编辑器的方式打开,打开之后找到这里的sever的listen就是你的端口号,默认的是80端口,你可以根据自己没有被占用的端口进行改写,改写完成之后保存然后打开你的localhost:你改写的端口号就OK了
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
上面是安装配置nginx服务器的方法,下面就是如何把自己的vue项目部署到你所安装配置的nginx服务器上的步骤了:
首先找到自己的vue的项目然后输入命令 npm run build 他会在你的vue目录下生成一个dist文件夹里面就是你的vue的项目
然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹
把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要留,然后把你刚刚复制的文件粘贴进去
然后打开浏览器输入最开始改的端口号localhost:你所改的端口号回车;你就会看到自己的vue的项目跑起来了我的打开就是这样的咯:
这样就大功告成了~~~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
nginx启动vue_nginx下部署vue项目的方法步骤相关推荐
- nginx下部署vue项目
nginx下部署vue项目 今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://ngin ...
- nginx下部署vue项目概览 - (资源篇)
相关博客: nginx下部署vue项目概览 这里使用的是百度云的服务器,CentOS7系统的 linux服务器用centos还是ubuntu系统_Linux nginx服务器搭建以及配置 nginx部 ...
- nginx 部署vue项目
首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx server ngi ...
- Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目 上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
- nginx同一域名下部署多个vue项目
-----------nginx同一域名下部署多个vue项目------------------------ 1.目的 实现nginx服务端同一域名下部署多个vue项目. 2. 实例 pmobile项 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- VUE项目学习(三):win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
- 在nginx上部署vue项目(history模式)--demo实列;
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是 ...
- nginx部署vue项目,给访问路径加前缀
Nginx安装与启动 去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
- Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹 在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
最新文章
- python读数据-python数据读写
- ActiveMQ点对点通讯,生产者-消费者
- vue-cli 3.0 跨域请求代理
- SpringBoot 集成Nacos报错(一)
- 如何升软件开发项目的利润
- 佳能Canon FAX-L160 传真机驱动
- 迅雷专用下载的几种代码
- JMeter使用教程-压测
- Spring学习(五):动态代理的两种实现方式(全网最容易懂)
- HTML 与 microsoftOffice word中字体对照表
- 电容之超级电容简易测试方法
- 推荐三个开源无刷电机驱动的开源网站
- 当代大学生结课后的一周
- ssr pac_全新回馈丨购金币三日礼,获取主线SSR羁绊
- “日历提醒app”程序说明文档
- java 求两个list 集合的交集,重复的元素
- 2019CISCN web题赛-JustSoSo;love_math(复现)
- 消息重复的处理---幂等性浅谈
- ICC图文流程——(二)布局规划Floorplan
- 击石乃有火:华为云的生长逻辑
热门文章
- 列出所有内核_Windows系统内核溢出漏洞提权
- filezilla检查新版本mac_filezilla中文版mac下载
- python控制台输出_替换Python中的控制台输出
- 【转】在唯一密钥属性“value”设置为“***”时,无法添加类型为“add”的重复集合项解决方法
- 免费制作gif图片工具
- java------io基础(一)
- VS2012发布网站IIS配置
- 南洋理工 OJ 115 城市平乱 dijstra算法
- Python 2.7的新特性
- 使用ERStudio创建数据表ER图并导出数据表的SQL(DDL)语句