iis站点下发布多个vue项目
记录一下iis上某个域名下发布多个vue项目的过程,主要分为webpack打包前的配置和iis重定向的配置。
vue打包配置:
1、在webpack 配置文件中(以vue.config.js为例),指定输出目录publicPath ,名称为你服务器上的二级目录,此处以 hcd 为例
module.exports = {
publicPath: '/hcd/',
}
2、路由配置
在vueRouter中设置base基础路由,名称为二级目录名称
const router = new VueRouter({
mode: 'history', // 此处路由为history模式,hash模式同理,只是服务器重定向设置有区别
base: baseUrl,
routes
})
3、在index.html中添加如下代码,base为二级目录
<meta base="/hcd/">
配置完后进行npm打包即可,然后将打包好的dist文件夹中的文件发布到iis服务器即可。
如果路由是hash模式不需要配置重定向,history则按如下配置
服务器重定向配置:
1、在iis中安装重定向模块
2、重定向配置
可以iis可视化界面配置,也可以直接以web.config文件的形式配置,此处以web.config配置文件的形式配置。
规则的排序将影响到重定向的最终结果,一般按照有小到大的顺序,即匹配到最多的url放在最下面,如以下代码中的第二个 rule
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
<rewrite>
<rules>
<rule name="hcd" stopProcessing="true">
<match url="^hcd\/(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/hcd/" />
</rule>
<rule name="Handle History Mode and custom 404/500" 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>
web.config放在一级目录即可,二级目录中不需要重定向
例如:iis某站点下有aaa、bbb两个二级目录,web.config文件和aaa 、bbb两个二级目录平级即可。
我是以虚拟目录作为二级目录
iis站点下发布多个vue项目的更多相关文章
- 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-in ...
- win10系统本地iis或nginx服务器部署vue.js项目
1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安 ...
- Vue 默认IIS站点配置
// Vue 默认IIS站点配置 module.exports = { baseUrl: '/SG/', }
- vue项目Windows Server服务器部署IIS设置Url重写
1.将vue项目使用npm run build命令打包后将dist文件夹内的文件全部拷贝到服务器. 2.IIS添加应用程序池,.NET CLR版本选择无托管代码 3.添加网站,应用程序池选择刚刚添加的 ...
- vue项目部署到IIS服务器上
前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 ...
- 【Vuejs】335-(超全) Vue 项目性能优化实践指南
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...
- 在IIS站点中Adomd.net集成认证账号问题
最近在做一个Asp.net项目的时候 ,在C#代码里面用到了Adomd.net去连接SSAS服务器做MDX查询,开发完成后将Asp.net代码部署到IIS后发现Adomd.net老是连接不到SSAS服 ...
- 为 VUE 项目添加 PWA 解决发布后刷新报错问题
为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏 ...
- Visual studio 调试发布到IIS站点方式一
在项目开发过程中,前端项目可能调用多个API接口,并且这些API接口是在同一个资源解决方案下的,一个资源解决方案下只能设置一个启动项目.那么问题来了,某个API业务需求变更或有BUG,解决后是需要调试 ...
随机推荐
- Shell学习(一)——Shell简介
参考博客: [1]Shell简介
- Java Web 实现Mysql 数据库备份与还原
前段时间某某删库事故付出的惨重代价告诉我们: 数据备份的必要性是企业数据管理极其重要的一项工作. 1. Mysql备份与还原命令 备份命令: mysqldump -h127.0.0.1 -uroot ...
- spring boot集成mybatis框架
概述 中文官网:http://www.mybatis.cn 参考教程:https://www.w3cschool.cn/mybatis MyBatis Plus:http://mp.baomidou. ...
- ActiveRecord教程
(一.ActiveRecord基础) ActiveRecord是Rails提供的一个对象关系映射(ORM)层,从这篇开始,我们来了解Active Record的一些基础内容,连接数据库,映射表,访问数 ...
- 【Linux】【Shell】【text】awk
基本用法:gawk [options] 'program' FILE ... program: PATTERN{ACTION STATEMENTS} ...
- Mockito 简介
Mockito 是一种 Java Mock 框架,主要是用来做 Mock 测试,它可以模拟任何 Spring 管理的 Bean.模拟方法的返回值.模拟抛出异常等等,在了解 Mockito 的具体用法之 ...
- 最基础前端路由实现,事件popstate使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Linux下安装数据库sqlite3
目录 一.简介 二.安装 三.测试 一.简介 SQLite 是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.SQLite 是在世界上最广泛部署的 SQL 数据库引擎 ...
- Android Service VS AsyncTask VS Thread
这三种方式的设计目的是不同的. Service: 适用于在后台长期持续运行的动作,如:播放音乐,查看网络数据.注意,在开发文档中,service本身是在UI线程中,所以所需的操作应该创建一个新的线程来 ...
- [BUUCTF]REVERSE——内涵的软件
内涵的软件 附件 例行检查,32位程序 32位ida载入,shift+f12检索程序里的字符串 看到一个很像flag的字符串,拿去尝试一下,成功 flag{49d3c93df25caad8123213 ...