IIS部署vue项目 IIS重写URL

【第一步】安装IIS

{1)打开控制面板 -> 打开程序和功能 -> 打开启用或关闭windows功能 

 (2)找到 Internet Information Services 勾选【web管理工具】和【万维网服务】,然后 确定

【第二步】安装URL重写模块

1). 安装URL Rewrite,下载地址
2). 安装 Application Request Routing,下载地址

下载后安装,安装完成抈IIS管理器会多出两个模块

【第三步】部署用vue项目做的web站点

(1) 将vue项目构建之后的dist文件夹里的全部文件copy到服务器上,

(2)新建一个iis站点,设置URL Rewrite规则

 (3)添加规则

 (4)填写规则正式表达式

注 :
1, 使用 : 正则表达式
2, 模式代码: ^((?!(api)).)*$
3, 添加两个条件::不是目录, 不是文件
4, 操作属性::/index.html
5, 点击右上角的应用

  

注 : 为什么要URL Rewrite ?
1, 因为VUE页面驱动是靠项目内的路由跳转,要保证每次页面都在根目录下的 /index.html。
2, 若是此处不添加规则,访问网站首页可以,但你刷新后或跳转页面就会出现 404 错误。

 (5)部署完成

打开网站即可看到可以正常浏览网站,以及可以访问到后台接口.
如若有多个后台接口,就在服务器主页添加重写URL规则即可.

1, 主要难点在配置反向代理,即 Application Request Routing和 URL Rewrite
2, 成功配置一次即可理解使用方式. 相当于配置vite.config.js的代理.
3, 要把项目需要的代理都正确添加上
4, 注意,会在vue站点的根目录里面生成一个web.config的配置文件,发布更新要保留这个配置文件,不然又要重新配置一次。

(6)web.config 配置文件内容

复制代码

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="index">
                    <match url="^((?!(api)).)*$" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

复制代码

IIS6 不支持直接部署 Vue.js 项目,因为它不支持处理单页应用程序所需的 HTML5 历史记录 API。 但是,您可以使用 URL 重写模块来配置 IIS6 以正确处理 Vue.js 单页应用程序,以下是具体步骤: 1.IIS6 上安装 URL 重写模块,您可以从 Microsoft 下载中心下载安装程序。 2. 在您的 Vue.js 项目的根目录中创建一个名为 `web.config` 的文件,然后将以下代码添加到该文件中: ```xml <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Vue Router" 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> ``` 3.Vue.js 项目的所有文件复制到 IIS6 服务器上的网站目录中。 4.IIS6 上创建一个新的网站,并将网站目录设置为您刚刚复制 Vue.js 项目文件的目录。 5. 启动网站,并使用浏览器访问您的 Vue.js 应用程序。 请注意,由于 IIS6 的限制,这种部署方法可能无法完全实现 Vue.js 单页应用程序的所有功能。建议您将应用程序部署到更现代的 Web 服务器上,例如 IIS7 或更高版本,或者使用专为单页应用程序设计的 Web 服务器,例如 Nginx 或 Apache。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值