vue+history+iis

开发环境下不论是使用hash模式，还是history模式，都可以正常使用。但是当产品编译后发布到测试环境、生产环境的时候，就会出现页面空白，或者指向了iis的默认页面。通过如下过程解决这个问题：

1.安装urlrewrite，如下：
（图片来自：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%8E%9F%E7%94%9F-node-js）

（图片来自：https://www.iis.net/downloads/microsoft/url-rewrite）

2.在官方有对应的配置说明，如下
（图片来自：https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90）

3.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="/askcomputer/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

如果重定向，尤其是Rewrite的位置没有配置正确的情况下，会导致对应路由下仅加载了一个默认的IIS Windows，无法加载相关的业务，包括静态文件css、js和图片内容。而是只显示了一个蓝色背景 iisstart.png 如下：
4.对应于项目中的config/index.js ，如下：

"use strict";
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require("path");

module.exports = {
  dev: {
	...
  },
  build: {
	...
    assetsPublicPath:"/askcomputer/"
  }
};

它对应于webpack.base.conf.js 下的output下的publicPath的配置如下

...
module.exports = {
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: (process.env.NODE_ENV === 'production') ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  }, 
  ...
}

也就意味着生产环境下取config.build下的 assetPublicPath 。

如果assetPublicPath设置的错误、或者没有设置的情况下，可能出现的现象就是页面空白，并且控制台报错，如下：

Uncaught SyntaxError: Unexpected token '<' (at vendor.....js:1:1)

Uncaught SyntaxError: Unexpected token '<' (at manifest.da...js:formatted:1:1)

app.d2...js:1 Uncaught SyntaxError: Unexpected token '<' (at app.d2....js:1:1)

5.配置router

const router=new Router({
    mode:'history',
    base:'/askcomputer/',
    routes:{
        ...
    }
});

如果Router没有配置的情况下， 但是 assetPublicPath 配置正确的情况，会出现正常加载静态资源文件，但是无法发出业务请求加载对应的组件和相关的视图。

6.运行编译后验证是否正确