IIS URLRewrite vue单页应用程序（history

作者: 漫漫江雪 | 来源:发表于2018-11-23 00:31 被阅读0次

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

<template>
    <div>
        <h2>我是关于我们页</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

Home.vue

<template>
    <div>
        <h2>我是主页</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

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也是作了点修改加了 <router-view />

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">主页</router-link>&nbsp;
      <router-link to="/about">关于我们页</router-link>&nbsp;
      <router-link to="/hello">Hello Vue</router-link>
    </p>
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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