Vue前端项目部署IIS的实现

背景：最近用vue写了个demo(不涉及调用后台数据)，为了给销售团队更好的给客户讲述产品的一些特点及大体的感官认识。需要将自己做的项目安装到他们的笔记本上面去，作为一个销售人员来说，他不会知道例如vue中的npm run dev/serve等命令，电脑中也没有相应的运行环境，这时候就需要用到windows本身自带的IIS服务，将本地开发的项目放到这个服务器上面去，这样就解决了这个场景的问题。

具体的实施步骤如下(以win10为例)

1、win+r打开cmd命令窗口，输入control打开控制面板，选择程序-->启用或关闭windows功能

2、选中ISS服务，为了不产生一些问题，点击每个加号选中下面所有选项

3、然后点击确定，开始安装所需要的东西，过程需要一点时间，请耐心等待，如果出现如下所示的问题

需修改注册表，HKEY_LOCAL_MACHINE/SOFTWARE/Policies/Microsoft/Windows/WindowsUpdate/AU，其中UseWUServer默认值为1，改成0；重启计算机，重复步骤1-3，即可安装成功

4、打开控制面板，调整为图标状态，打开管理工具

5、找到刚添加ISS服务并进行相关配置

6、右键网站-->添加网站，并进行相应的配置

7、物理路径为vue项目打好包(npm run build及其他打包的版本)所存放的目录，主机名无需填写，之后点确定即可启动，为防止端口名冲突，可设置为例如8082等

8、启动后点击浏览即可在浏览器中预览自己部署的项目了，至此本机ISS部署vue项目完成

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何在ASP.NET Core应用程序运行Vue并且部署在IIS上详解

    如何在ASP.NET Core应用程序运行Vue并且部署在IIS上详解

    前言 从.NET Core 1.0开始我们就将其应用到项目中,但是呢我对ASP.NET Core一些原理也还未开始研究,仅限于会用,不过园子中已有大量文章存在,借着有点空余时间,我们来讲讲如何利用ASP.NET Core结合Vue在IIS上运行. ASP.NET Core结合Vue部署于IIS 关于安装Vue和Webpack则不再叙述,我们直接来创建ASP.NET Core应用程序或者通过dotnet new mvc创建ASP.NET Core应用程序 接下来在上述应用程序下通过如下命令创建Vu

  • Vue项目打包部署到iis服务器的配置方法

    Vue项目打包部署到iis服务器的配置方法

    一 将Vue项目打包 切换到项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite url write的方式有两种,一种是在iis下载url rewrite工具配置规则 另一种是配置web.config文件,我用的是第二种 web.config内容 <?xml version="1.0" encodin

  • 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

  • Vue前端项目部署IIS的实现

    背景:最近用vue写了个demo(不涉及调用后台数据),为了给销售团队更好的给客户讲述产品的一些特点及大体的感官认识.需要将自己做的项目安装到他们的笔记本上面去,作为一个销售人员来说,他不会知道例如vue中的npm run dev/serve等命令,电脑中也没有相应的运行环境,这时候就需要用到windows本身自带的IIS服务,将本地开发的项目放到这个服务器上面去,这样就解决了这个场景的问题. 具体的实施步骤如下(以win10为例) 1.win+r打开cmd命令窗口,输入control打开控制面

  • jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    目录 前提: 思路: 步骤: 配置nodejs工具 git代码文件目录如下 Dockerfile的文件内容 nginx.conf主配置文件的内容 最近比较闲,尝试了一下docker部署业务测试环境的前端vue项目,作此记录 这里我的环境是Jenkins+docker+harbor+nginx部署,但是由于此项目以节点形式加入jenkins,构建和部署都在一台,所以没有用到harbor,但是生产环境可能部署和构建不在一台,会需要先推送到harbor,也有详细步骤. 前提: 1安装好了jenkins

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

  • IDEA中Debug调试VUE前端项目调试JS只需两步

    IDEA中Debug调试VUE前端项目调试JS只需两步

    目录 前言 第一步,找到jsdebug运行时 第二步.打断点.运行jsdubg项 结语 前言 有一个礼拜没发quarku+graalvm相关的内容了,因为博主在忙一个新的前端项目去了,从element-ui切换到antdv,也有很多新的东西需要一边啃文档一边输出,程序出现bug自是在所难免的,所以需要开发工具可以非常方便的debug程序. 在java开发中,debug就是一个debug启动按钮解决的事情,而在前端开发中,IDEA这个开发工具也提供了非常好用的jsdebug工具,博主的这个用法不是

  • Vue前端项目自适应布局的简单方法

    Vue前端项目自适应布局的简单方法

    目录 一.单位尺寸 二.基于rem实现自适应布局 附:html5页面 的rem 布局适配方法 总结 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:“root em”的缩写,是一个相对长度单位:rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小. 说明: 谷歌浏览器,字体的默认大小是16px; 如果父元素item1的font-size=50px,那么子元素item2的1em=50px.

  • vue前端项目打包成Docker镜像并运行的实现

    vue前端项目打包成Docker镜像并运行的实现

    目录 vue前端项目打包成Docker镜像并运行 前端将vue打包成镜像发布 一.总体预览 二.打包配置 三.问题思考 vue前端项目打包成Docker镜像并运行 首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要. cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 #

  • Vue+Django项目部署详解

    本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOSTS = [ 'api.youdomain.com', ] (2) 跨域白名单 CORS_ORIGIN_WHITELIST = ( # 前端域名 "www.youdomain.com", # 后端api接口域名 "api.youdomain.com" ) (3) 支付宝电

  • 前端将项目部署到服务器(Nginx)的完整步骤

    目录 一.准备环境 二.安装Nginx 1. 安装Nginx依赖 2.下载Nginx 3.解压下载好的Nginx 压缩包 4.编译安装Nginx 5.启动Nginx服务 三.操作步骤 1.使用Xshell连接服务器 2.上传静态资源文件 3. 配置Nginx 4. 重启Nginx服务 总结 我们在会开发项目的同时,也应该了解一下前端是如何部署项目的: 一.准备环境 1.服务器或者虚拟机(后端已经搭建好的,这里就不讲述如何搭建服务器了)2.Xshell 和 Xftp --> 存放静态文件和操作服务

  • 把vue-router和express项目部署到服务器的方法

    - 首先确定此项目在本地能够运行成功 在本地命令行中输入npm run start,无报错,且打开127.0.0.1:3000 有写的路由为/的页面,如图 此为文件层级关系 front为前端文件 xk3为后台express与数据库mysql链接的文件 用命令行进入后台并且运行,启动成功 这是路径为/的页面 在浏览器中输入路径http://localhost:3000/ 浏览器中显示WelCome to express 至此此项目在本地运行成功,我们现在就要放到服务器上. - 准备工作 此前服务器

  • vue前端优雅展示后端十万条数据面试点剖析

    vue前端优雅展示后端十万条数据面试点剖析

    目录 前置工作 后端搭建 前端页面 直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载 虚拟列表 前置工作 如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 先把前置工作给做好,后面才能进行测试 后端搭建 新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务 没有安装no

随机推荐