首页 » 网络编程 » Vue

iis站点下发布多个vue项目

Vue 2022-01-04

记录一下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中安装重定向模块

iis站点下发布多个vue项目

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项目


上一篇:Vue中textarea自适应高度方案的实现下一篇:详解Vue项目的打包方式
程序园_程序员的世界 Copyright © 2020- www.580doc.com. Some Rights Reserved.