首页 > 其他分享 >Vue 设置为history模式之后,刷新页面报404错误的解决办法

Vue 设置为history模式之后,刷新页面报404错误的解决办法

时间:2023-11-18 12:23:35浏览次数:24  
标签:web Vue 文件 config 404 根目录 重写 history

网上搜索出现很多修改前端或后端的方法试了都不行,后来在IIS中添加URL重写规则就解决了(如果没有Url重写模块,需要下载安装:rewrite_amd64_zh-CN.msi),设置重写之后会在网站前端根目录下生成一个web.config文件。所以如果嫌配置url重写麻烦的话,直接把这个web.config文件放置到自己网站的根目录下即可。

 

 

 

 

 

 

生成的web.config文件:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="test" patternSyntax="Wildcard">
                    <match url="*" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

可以直接把该文件放置到根目录下即可,如下图:

 

标签:web,Vue,文件,config,404,根目录,重写,history
From: https://www.cnblogs.com/qqflying/p/15547015.html

相关文章

  • 一个简单案例的Vue2.0源码
    本文学习vue2.0源码,主要从newVue()时发生了什么和页面的响应式更新2个维度了解Vue.js的原理。以一个简单的vue代码为例,介绍了这个代码编译运行的流程,在流程中原始DOM的信息会被解析转换,存在不同的对象中。其中关键的对象有el、template、ast、code、render、renderfunction和vno......
  • 手撕Vuex-安装模块方法
    前言经过上一篇文章的介绍,我们实现了将模块安装到store中,那么本章我们就来介绍一下怎么安装模块当中的方法也就是actions、mutations、getters。所以本次文章的目标就是将模块当中的actions、mutations、getters安装到store中,然后在组件中使用。分析阶段那么安装acti......
  • uniapp脚手架中vue3项目配置`@`,并且在vscode中有提示
    uniapp脚手架中vue3项目配置@,并且在vscode中有提示在vite.config.js中配置一下代码import{defineConfig}from"vite";importunifrom"@dcloudio/vite-plugin-uni";import{resolve}from"path";//https://vitejs.dev/config/exportdefaultdefine......
  • Vue多页面和单页面的场景
    开发分类实现方式页面性能开发效率用户体验学习成本首屏加载SEO单页一个html页面按需更新性能高高非常好高慢差多页多个html页面整页更新性能低中等一般中等快优场景单页面应用系统类网站内部网站文档类网站移动端站点多页面应用公......
  • 【前端VUE】VUE环境安装
    nodejs安装nodejs教程https://blog.csdn.net/muzidigbig/article/details/80493880检查是否安装成功VUE安装npminstall-g@vue/cli创建VUE项目vue create项目名称第一个和第一个是默认的VUE3和VUE2配置,当前选择Manuallyselectfeatures自行选择配置。选择Babel......
  • Vue3 + antDesign3.x 汉化 中文(解决日期混合中英文模式
    依赖项版本 "ant-design-vue":"^3.2.20", "dayjs":"^1.11.10", "vue":"^3.0.5",依赖处理main.js中import{createApp}from'vue'importAntdfrom'ant-design-vue'import'an......
  • vue3+element-Plus表格滚动联动
    constTable0=ref()constTable1=ref()functionsyncScroll(){for(leti=0;i<compareData.compareInfo.length;i++){letfirstTable=Table0.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]letsec......
  • Vue 项目配置自动更新,自动刷新页面
    今天用户反馈使用页面的时候,有时候点击没反应,排查下来,是因为发布版本的时候,用户那边没有加载最新的文导致的,然后根据思路,做了这个自动更新的功能效果预览http://demo.webwlx.cn/#/update实现思路1.把当前版本的编译时间,通过环境变量的方式保存起来打开vite.config.jsim......
  • Vue 该如何实现组件缓存?
    在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合理的方式组织起来,那么自然会存在组件之前切换的问题,vue中有个动态组件的概念,它能够帮助开发者更好的实现组件之间的切换。但是在面对需求频繁的变化,切换组件时,动态组件在切换的过程中,组件的实例都是重新创建的,而......
  • Vue-打印组件
    组件代码:<el-buttonv-print="{id:'print-content'}"icon="el-icon-printer">打印</el-button>//插件vue-print-nb示例: ......