博客

使用VsCode调试模式下，Logout后正常跳转到“登录页面”。 但是build打包后，部署到IIS下，Logout后就无法找到页面。经过相关资料查找，主要的原因还是Vuejs打包后 “history”路由引起的。

Vue框架提供了

Hash

和

History

两种路由模式。默认为 Hash 模式，但此模式下URL 中会存在“#”, 缺少美观，并且在微信中不允许URL存在“#”，所以很多人都会选择 “History”模式， 这套框架就是默认使用的”History”模式。

生产环境下解决方案：

一、修改为

Hash

模式 （对不牵涉到微信的项目可以使用）

修改项目 src / router / routers.js 文件

export default new Router({
  // mode: 'history',   //直接注释这行，默认即为Hash模式
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

二、

history

模式下

Internet Information Services (IIS)


安装

IIS UrlRewrite


在你的网站根目录中创建一个 web.config 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <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>

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}