webpack打包后发布到IIS，刷新找不到

Question

将项目打包好放在iis上遇到两个问题，
1.直接输入地址 http://192.168.0.106:8089 会跳到 http://192.168.0.106:8089/home。但是刷新后就提示404，直接输入 http://192.168.0.106:8089/home 也是404
2.我在config/index下设置代理

module.exports = {
  dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api':{
    // target: 'http://192.168.0.106:3439', // 这里是服务器接口地址
    changeOrigin: true,
    pathRewrite: {
      '^/api': '' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
    }
  }
},

src/config/fetch.js

// 用来编写所有的ａｘｉｏｓ处理和ａｘｉｏｓ封装
import axios from 'axios'

export default function fetch (url, params) {
  return new Promise((resolve, reject) => {
axios.post(url, params).then(response => {
  if (response.data.errcode === 0) {
    resolve(response.data)
  } else if (response.data.errcode === 9001034) { // 没有直播间
    reject(response.data.errmsg)
  } else {
    reject(response.data.errmsg)
  }
}).catch((error) => {
  console.log(error)
  reject(error)
})
  })
}

//api.js

import fetch from '../config/fetch'
/**
 * 手机号登陆1.04
 */
export const mobileLogin = params => fetch('/api/User/FirstLogin', params)

在测试环境下没问题，但是打包放到iis之后所有的接口访问都

前面代理设置的地址就直接成了IIS上放置文件的接口了，请问这个我该如何配置

Answer 1

原因出在路由的history模式,官方解决方案，不过我只用过nginx没用过iis,希望你能看懂iis的配置...

原因是这样的：你发一个请求到后台，url是这样:http://domain:port/path，后台会用path去匹配服务器设置的规则，如果你没指向到你的index.html就出问题了。。
不刷新只是在页面点来点去不出问题，是因为没有向后台发请求，vue使用浏览器的HistoryAPI来处理路由事件并相应渲染

Answer 2

第二个问题解决
就是对与开发环境和生产环境进行不同的配置，之前设置代理只是用于开发环境，打包后就没有了，因此
config/dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api/"' // 加上这个开发环境就直接去调用代理了
})

config/pro.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://118.190.**.*:3437"' // 生产环境地址
}

之后在api.js

var root = process.env.API_HOST

所有的接口请求改为

 /**
 * 手机号登陆1.04
 */
export const mobileLogin = params => fetch(root + '/User/FirstLogin', params)

这样就会自动判断是开发环境还是生产环境而自动调用不同的地址了