Vue如何去掉#方法,刷新404报错问题

问题 ：Vue如何去掉#方法,刷新404报错问题，采用的是IIS部署，前端，后台前端，API共用 一个入口 

背景

开发语言：.NETCORE

部署环境:IIS

项目结构：前后端分离即WEBAPI

 webapi相信大家都是前端内容展示页一个端口，api访问一人上端口，但由于用户给的只有一个域名，没有多余的入口。这就折腾到人了。

实现步骤

首先得让大家知道发布的目录，说一堆文字不如一张图 。wwwroot所放的文件为前端内容展示页，admin为后台管理前端，至于发布目录下就是webapi文件了。如下图：

前端修改部分

vue项目打包后发布有两种情况

1. 发布为网站，即一级目录
2. 发布为应用程序，即二级目录

1. 项目修改vue.config.js和route/index.js两个文件

vue.config.js文件，修改publicPath参数，这里引用外部参数， “/admin”为二级目录，如果为一级目录，”admin“改为“/”

const BASE_URL = process.env.NODE_ENV === 'production' ? '/admin' : '/'
module.exports = {
  publicPath: BASE_URL,
  outputDir: 'dist',
  assetsDir: 'static',

route/index.js文件，在new Route中添加mode和base参数。去掉#，需要路由模式改为history；,base默认为“/”，二级目录情况下base必须添加

c

const createRouter = () => new Router({
  mode: 'history', // 去掉#，需要路由模式改为history
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

1. IIS配置部分

如果第1步直接打包发布到IIS，通过地址输入url或刷新页面都会报错。通过在IIS配置URL重写规则，就不会报错。

URL重写下载：https://download.microsoft.com/download/1/2/8/128E2E22-C1B9-44A4-BE2A-5859ED1D4592/rewrite_amd64_zh-CN.msi 

 

添加规则，选择空白规则

修改模式、条件、和操作三项（见下图）

右侧边点击应用，即可。

 

后台配置部分

最后一项非常的重要，有些人说按网上的配置还不行，就差这一步修改web.config 重载路由规则，即黑色底纹那一部分

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath="dotnet" arguments=".\Guet.WebApi.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="OutOfProcess" />
    </system.webServer>
  </location>
    <system.webServer>

 <rewrite>
            <rules>
                <rule name="home" patternSyntax="Wildcard">
                    <match url="home" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="news" patternSyntax="Wildcard">
                    <match url="news" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="exchange" patternSyntax="Wildcard">
                    <match url="exchange" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="home/*" patternSyntax="Wildcard">
                    <match url="home/*" />
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="news/*" patternSyntax="Wildcard">
                    <match url="news/*" />
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="cmsdetail" patternSyntax="Wildcard">
                    <match url="cmsdetail" />
                    <action type="Rewrite" url="/" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                </rule>
                <rule name="exchange/*" patternSyntax="Wildcard">
                    <match url="exchange/*" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
                <rule name="contestlist" patternSyntax="Wildcard">
                    <match url="contestlist" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>

 <security>
            <requestFiltering>
                <requestLimits maxAllowedContentLength="3000000000" />
            </requestFiltering>
        </security>
    </system.webServer>
</configuration>