IIS 部署 Vue3

引用地址:https://blog.youkuaiyun.com/IT_laohu/article/details/124735538

在服务器上部署 Vue 项目,通过默认主页进入到其他页面时,如果直接刷新界面会报 404错误。

解决这个问题的话,需要在IIS 中设置 Url 重写规则。具体操作步骤如下:

1、双击打开Url 重写

2、点击右侧添加规则

3、选择 入栈规则中的空白规则

4、填写规则名称,这个自定义。模式内容填写  .*

 5、点击 条件 栏右侧箭头,会出现逻辑分组选择框。点击添加

 6、添加条件,条件输入: {REQUEST_FILENAME}。添加两个条件。

7、编写重写URL,这里可以填写  /  或者 /index.html

 

到这里就配置好了重写规则,点击右侧的应用即可。

 
 

### 配置 Vue3 项目在 IIS 中的路由重定向 为了使 Vue Router 的 HTML5 History 模式正常工作,在 IIS部署 Vue3 应用程序时,需要正确配置 Web.config 文件来处理路由重定向。当请求未匹配任何物理文件或目录时,应将这些请求重定向到 `index.html`。 #### 创建并编辑 web.config 文件 确保在应用程序根目录下存在名为 `web.config` 的 XML 文件,并包含以下内容: ```xml <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <!-- 启用静态文件 --> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> <!-- 设置默认文档 --> <defaultDocument enabled="true"> <files> <add value="index.html" /> </files> </defaultDocument> <!-- 路由重写规则 --> <rewrite> <rules> <rule name="Handle History Mode and custom routes" 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="/index.html" appendQueryString="true" logRewrittenUrl="false"/> </rule> </rules> </rewrite> <!-- 处理CORS跨域资源共享 --> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer> </configuration> ``` 此配置实现了几个重要功能: - 对于不存在的实际资源(既不是文件也不是目录),所有请求都将被重写至 `/index.html`[^4]。 - 支持 CORS 请求头以便前端可以访问 API 接口[^3]。 #### 安装必要的 IIS 组件 除了上述配置外,还需要确保已安装 URL Rewrite Module 和 Application Request Routing (ARR) 模块以支持路径重写操作。可以通过 Microsoft 下载中心获取最新版本的 URL Rewrite Tool[^2] 并按照提示完成安装过程。 通过以上步骤可以在 IIS 上成功实现 Vue3 单页面应用(SPA)的历史模式(History mode),从而解决了由于缺少适当配置而导致的空白页或其他异常情况下的显示问题[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值