nginx-vue项目在window下的部署
主机->操作系统->window(.net)/Linux->tomcat/nginx(软件反向代理)
1.vue项目打包到dist文件夹(之后把dist文件夹放到服务器就可以了)
npm run build


2.去https://nginx.org/官网下载nginx


这里有很多版本,我们选择stable version

点击进入下载页面

3.安装nginx
进入安装路径双击nginx.exe

若是一闪而过,在浏览器中输入localhost,若是出现以下类似页面:

打开控制面板中的管理工具->服务->找到IIS

双击打开,选择停止(因为端口可能被占用)

之后重新双击nginx.exe,在浏览器输入localhost,出现一些页面则安装成功

4.显示自己打包的页面
找到自己项目中的dist文件夹

复制到nginx文件夹下的html中,把之前nginx默认的index.html等删除,把我们dist里面的文件放到ngnix的html文件中,
如图:

之后回到浏览器中刷新,就是我们打包过后的页面了

完成!注意ngnix文件名路径不能带有中文!
还有一种方式是修改nginx的配置文件,可以自己去百度搜索查看
nginx-vue项目在window下的部署的更多相关文章
- 阿里云安装Nginx+vue项目部署
阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...
- docker部署nginx+vue项目
1.vue项目打包 npm run build 会在项目生成dist文件夹,这个文件夹可以使用nginx或tomcat来发布服务 2.查找nginx基础镜像 可以通过以下网站找到符合自己的基础镜像,我 ...
- Vue项目在Docker的自动化部署
操作系统:CentOS 部署环境:Docker CI/CD工具:Jenkins 1.环境配置 安装Jenkins:Centos安装Jenkins 安装Docker:Centos安装Git.DotNet ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser问题
如下图所示,项目在IE11下打开报错: 因为使用了 ES6 中用来传递异步消息的的Promise,而IE浏览器都不支持. 解决方法: 第一步: 安装 babel-polyfill . babel-po ...
- React/Vue 项目在 GitHub Pages 上部署时资源的路径问题
GitHub Pages 常被用来部署个人博客,而无论是大名鼎鼎的 Jekyll,还是 Hugo 或者 Hexo,他们都是将我们的文章嵌入模板,发布为静态页面,也就是说,GitHub Pages (G ...
- spring boot web项目在IDEA下热部署解决办法(四步搞定)
最近在用spring boot 做一个web站点,修改了类.html.js等,刷新页面,没有生效,非要手动去make一下或者重启,大大降低了开发效率. 什么是热部署? 应用启动后会把编译好的Class ...
- vue项目在IE下显示空白打不开问题
近期遇到了项目是vue做的,在IE浏览器下打不开,显示空白问题,解决方案如下: 打不开的原因是因为少了babel-polyfill处理器,所以第一步需要下载: npm install babel-po ...
- vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser错误
ie浏览器下报错 vue刚搭建的项目,在谷歌浏览器能够正常访问,但是在ie11等ie浏览器下无法显示页面,打开控制台查看无报错信息,打开仿真一栏,提示[vuex] vuex requires a Pr ...
随机推荐
- 百度地图根据list经纬度算每个点到剩余点的平均距离、最远距离和最近距离
一.使用步骤 说明:给你一大串坐标list.计算每个点到其他所有点的最近最远平均距离. 1.打开百度地图api在线demo(随便一个都行) 2.替换<script></script& ...
- 论文阅读笔记(六)【TCSVT2018】:Semi-Supervised Cross-View Projection-Based Dictionary Learning for Video-Based Person Re-Identification
Introduction (1)Motivation: ① 现实场景中,给所有视频进行标记是一项繁琐和高成本的工作,而且随着监控相机的记录,视频信息会快速增多,因此需要采用半监督学习的方式,只对一部分 ...
- waiting list
Problem: how to cluster non-stationary multivariate time series. What are stationary time series How ...
- OI学习之路上的宝藏网站/App分享
OI学习之路上的宝藏网站/App分享 想要变强吗少年?这里有各种我平时收集的网站/App,它们可以帮助你更好地学习算法或者找到解题思路.废话不多说,快来打开新世界的大门罢~ 知识学习 觉得各种知识晦涩 ...
- Python之三:运算符与表达式
1.运算符: 1.1.运算符种类: 运算符 名称 说明 例子 + 加 5+4 - 减 * 乘 / 除 // 取整除 商的整数部分 3//2,结果 ...
- jQuery---突出展示案例
突出展示案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- 常用网络命令 在windows下
1.增加一条临时静态路由 格式:route add <目的网络地址> mask <目的网络子网掩码> <网关> 实例:route add 0.0.0.0 mask ...
- vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 记录 Docker 的学习过程 (网络篇)
打开2个会话,分别运行以下命令 # docker run -it -P --name nginx2 nginx #-P 端口随机映射 再打开一个会话查看 运行中的容器 # docker ps -aCO ...
- MapReduce第一个项目 WordCount
参考自林子雨大数据教学: http://dblab.xmu.edu.cn/blog/hadoop-build-project-using-eclipse/ 创建一个文件夹:放入一个文本文件:填 ...