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


Posted in Javascript onOctober 14, 2019

一 将Vue项目打包

切换到项目目录下,输入cnpm run build 打包

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

等待打包完成

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

二 URL 重写

访问我们的一个url

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

原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite
url write的方式有两种,一种是在iis下载url rewrite工具配置规则

另一种是配置web.config文件,我用的是第二种

web.config内容

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/x-woff2" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".ttf" mimeType="font/x-ttf" />
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="text/json" />
 </staticContent>
 <rewrite>
  <rules>
  <rule name="vue" stopProcessing="true">
   <match url=".*" />
   <conditions logicalGrouping="MatchAll">
   <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
   <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
   </conditions>
   <action type="Rewrite" url="/" />
  </rule>
  </rules>
 </rewrite>
 </system.webServer>
</configuration>

将该文件拷贝到打包好根目录下面

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

发现成功访问到我们的url

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

总结

以上所述是小编给大家介绍的Vue项目打包部署到iis服务器的配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 #Javascript
vue实现百度语音合成的实例讲解
Oct 14 #Javascript
vue中进行微博分享的实例讲解
Oct 14 #Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 #Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 #Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 #Javascript
vue的路由映射问题及解决方案
Oct 14 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
wxPython实现画图板
2020/08/27 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
使用Pycharm分段执行代码
2020/04/15 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
给朋友的道歉信
2014/01/09 职场文书
给领导的致歉信范文
2014/01/13 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
自动一体化专业求职信
2014/03/15 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
市场部岗位职责范本
2015/04/15 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书