IIS URLRewrite vue单页应用程序（history模式）

vue的单页应用部署后，当我们进入到某个路由之后，按F5刷新页面会出现404错误：

IIS下部署后的解决方案一般是使用 URLRewrite
首先要安装URLRewrite 下载地址

准备一个简单的vue项目只包含路由功能 (安装了vue-router cnpm i -S vue-router)

image.png

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/routes'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

HelloWorld.vue是创建时vue自带的组件
另外的About.vue和Home.vue是建的很简单的组件,只在template中加入了点内容
About.vue

Home.vue

router/routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import Home from '../components/Home'
import About from '../components/About'

Vue.use(VueRouter)

const routes=[
    {path:'/',component:Home},
    {path:'/about',component:About},
    {path:'/hello',component:HelloWorld}
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

App.vue也是作了点修改加了

项目搭建好后，构建： npm run build，接着发布到IIS

image.png

现在已经可以打开浏览站点了，但是例如浏览到 http://localhost:8088/about F5刷新页面会出404错误

image.png

最开始的时候安装了URLRewrite，
现在在IIS上添加重写规则

image.png

这一步后，选择右上角的添加规则

image.png

image.png

image.png

image.png

填写完毕后，点击右侧的应用即可
现在在 http://localhost:8088/about路由下F5刷新就不会404了