Vue项目部署到IIS后刷新报错404的问题及解决方法

下面是详细的“Vue项目部署到IIS后刷新报错404的问题及解决方法”的攻略：

问题描述

在将Vue项目部署到IIS中后，如果在非首页路由下刷新页面，将会出现404错误。原因是IIS对于router的path不识别，需要进行相应的设置。

解决方法

1.在项目根目录下创建web.config文件，内容如下（新版Vue CLI生成的项目中已有该配置文件）：

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode">
          <match url=".*" />
          <conditions>
            <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>

2.在vue.config.js中进行页面路径配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  indexPath: 'index.html',
  filenameHashing: true,
  devServer: {
      ...
  }
}

3.在路由文件中设置base路径

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

const router = new VueRouter({
  mode: 'history',
  base: '/dist/',//网站目录
  routes
})

示例说明：

假设我们有一个Vue项目，项目名为vue-demo，项目输出打包后的文件夹名为dist，现在需要将该项目部署到IIS根目录，路径为http://localhost:8001/。这时候，如果直接访问首页，是没有问题的，但如果访问http://localhost:8001/about，就会出现404错误。

首先，我们需要在项目根目录下创建web.config文件，并在文件中写入如上面代码所示的内容，用于配置IIS服务器。

然后，在vue.config.js中进行页面路径配置，确保输出的页面文件名和路径都正确。

最后，在路由文件中配置base路径，指向部署后的目录，这样路由就能正常的被识别，刷新也不会出现404错误了。

希望这个回答能够帮到你。