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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
一段实时更新的时间代码
2006/07/07 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
js 通用订单代码
2013/12/23 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
前端微信支付js代码
2016/07/25 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python实现汽车管理系统
2018/11/30 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
python创建文本文件的简单方法
2020/08/30 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
个人工作表现评语
2014/04/30 职场文书
爱护花草树木的标语
2014/06/11 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
春游踏青活动方案
2014/08/14 职场文书
母亲节主题班会
2015/08/14 职场文书
高中运动会广播稿
2015/08/19 职场文书
世界文化遗产导游词
2019/08/07 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
python 如何在list中找Topk的数值和索引
2021/05/20 Python
详解Python魔法方法之描述符类
2021/05/26 Python
python小型的音频操作库mp3Play
2022/04/24 Python