主机->操作系统->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下的部署的更多相关文章

  1. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  2. docker部署nginx+vue项目

    1.vue项目打包 npm run build 会在项目生成dist文件夹,这个文件夹可以使用nginx或tomcat来发布服务 2.查找nginx基础镜像 可以通过以下网站找到符合自己的基础镜像,我 ...

  3. Vue项目在Docker的自动化部署

    操作系统:CentOS 部署环境:Docker CI/CD工具:Jenkins 1.环境配置 安装Jenkins:Centos安装Jenkins 安装Docker:Centos安装Git.DotNet ...

  4. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  5. vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser问题

    如下图所示,项目在IE11下打开报错: 因为使用了 ES6 中用来传递异步消息的的Promise,而IE浏览器都不支持. 解决方法: 第一步: 安装 babel-polyfill . babel-po ...

  6. React/Vue 项目在 GitHub Pages 上部署时资源的路径问题

    GitHub Pages 常被用来部署个人博客,而无论是大名鼎鼎的 Jekyll,还是 Hugo 或者 Hexo,他们都是将我们的文章嵌入模板,发布为静态页面,也就是说,GitHub Pages (G ...

  7. spring boot web项目在IDEA下热部署解决办法(四步搞定)

    最近在用spring boot 做一个web站点,修改了类.html.js等,刷新页面,没有生效,非要手动去make一下或者重启,大大降低了开发效率. 什么是热部署? 应用启动后会把编译好的Class ...

  8. vue项目在IE下显示空白打不开问题

    近期遇到了项目是vue做的,在IE浏览器下打不开,显示空白问题,解决方案如下: 打不开的原因是因为少了babel-polyfill处理器,所以第一步需要下载: npm install babel-po ...

  9. vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser错误

    ie浏览器下报错 vue刚搭建的项目,在谷歌浏览器能够正常访问,但是在ie11等ie浏览器下无法显示页面,打开控制台查看无报错信息,打开仿真一栏,提示[vuex] vuex requires a Pr ...

随机推荐

  1. Hadoop集群初步搭建:

    自己整理了一下Hadoop集群简易搭建的过程,感谢尚观科技贾老师的授课和指导! 基本环境要求:能联网电脑一台:装有Centos系统的VMware虚拟机:Xmanager Enterprise 5软件. ...

  2. cf1000E

    先缩点构造出一颗树,然后求树的直径就好 const int maxn=3e5+5; const int maxm=6e5+5; const int inf=1e9; int head[maxn],ve ...

  3. css3制作网页动画

    一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...

  4. NPOI 生成Excel

    private void btnSave_Click(object sender, EventArgs e) { ) != ".xls") { MessageBox.Show(&q ...

  5. 为什么SSL证书要设有效期?

    1.首先是为了安全考虑,CA机构不能保证一个网站永远是合法的,因此它需要定期检查网站. 2.其次,以往CA证书都非常贵,签发证书的机构通过设置期限来收费,是一种商业途径. 3.最后,还有最重要的原因就 ...

  6. laravel使用阿里云OSS上传图片

    需要自己注册阿里云账号并且开通oss服务,建立Bucket存储空间,此步骤不做演示 一.composer安装:使用composer在项目根目录执行以下命令 composer require johnl ...

  7. 10.3 c++ STL 初步

    #include<Windows.h>#include<iostream>#include<algorithm>  // sort  swap   min   ma ...

  8. [转]shallow heap & retained heap

    所有包含Heap Profling功能的工具(MAT, Yourkit, JProfiler, TPTP等)都会使用到两个名词,一个是Shallow Size,另一个是 Retained Size.  ...

  9. JFinal获取多个model

    个人博客 地址:http://www.wenhaofan.com/article/20180930112646 由于jfinal框架自身没有实现获取多个同一类型的Model的方法,导致获取ModelL ...

  10. vue报错[Vue warn]: The data property "record" is already declared as a prop. Use prop default value instead.

    当我写了一个子组件,点击打开子组件那个方法时报了一个错 这句话说明意思呢?谷歌翻译一下↓ 数据属性“record”已声明为prop. 请改用prop默认值. 感觉翻译的有点怪,通过最后修改代码后大概意 ...