我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情
开发环境下不论是使用hash模式，还是history模式，都可以正常使用。但是当产品编译后发布到测试环境、生产环境的时候，就会出现页面空白，或者指向了iis的默认页面。通过如下过程解决这个问题：
1.安装urlrewrite，如下：
（图片来自：router.vuejs.org/zh/guide/es…）
（图片来自：www.iis.net/downloads/m…）
2.在官方有对应的配置说明，如下
（图片来自：v3.router.vuejs.org/zh/guide/es…）
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.运行编译后验证是否正确
