鍍金池/ 問答/HTML/ webpack打包后發(fā)布到IIS,刷新找不到

webpack打包后發(fā)布到IIS,刷新找不到

將項(xiàng)目打包好放在iis上遇到兩個(gè)問題,
1.直接輸入地址 http://192.168.0.106:8089 會(huì)跳到 http://192.168.0.106:8089/home。但是刷新后就提示404,直接輸入 http://192.168.0.106:8089/home 也是404
2.我在config/index下設(shè)置代理


module.exports = {
  dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api':{
    // target: 'http://192.168.0.106:3439', // 這里是服務(wù)器接口地址
    changeOrigin: true,
    pathRewrite: {
      '^/api': '' // 這里理解成用‘/api’代替target里面的地址,后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add',直接寫‘/api/user/add’即可
    }
  }
},

src/config/fetch.js

// 用來編寫所有的axios處理和axios封裝
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'
/**
 * 手機(jī)號(hào)登陸1.04
 */
export const mobileLogin = params => fetch('/api/User/FirstLogin', params)

在測試環(huán)境下沒問題,但是打包放到iis之后所有的接口訪問都

clipboard.png
前面代理設(shè)置的地址就直接成了IIS上放置文件的接口了,請(qǐng)問這個(gè)我該如何配置

回答
編輯回答
愛是癌

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

原因是這樣的:你發(fā)一個(gè)請(qǐng)求到后臺(tái),url是這樣:http://domain:port/path,后臺(tái)會(huì)用path去匹配服務(wù)器設(shè)置的規(guī)則,如果你沒指向到你的index.html就出問題了。。
不刷新只是在頁面點(diǎn)來點(diǎn)去不出問題,是因?yàn)闆]有向后臺(tái)發(fā)請(qǐng)求,vue使用瀏覽器的HistoryAPI來處理路由事件并相應(yīng)渲染

2017年11月14日 08:19
編輯回答
涼汐

第二個(gè)問題解決
就是對(duì)與開發(fā)環(huán)境和生產(chǎn)環(huán)境進(jìn)行不同的配置,之前設(shè)置代理只是用于開發(fā)環(huán)境,打包后就沒有了,因此
config/dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api/"' // 加上這個(gè)開發(fā)環(huán)境就直接去調(diào)用代理了
})

config/pro.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://118.190.**.*:3437"' // 生產(chǎn)環(huán)境地址
}

之后在api.js

var root = process.env.API_HOST

所有的接口請(qǐng)求改為

 /**
 * 手機(jī)號(hào)登陸1.04
 */
export const mobileLogin = params => fetch(root + '/User/FirstLogin', params)

這樣就會(huì)自動(dòng)判斷是開發(fā)環(huán)境還是生產(chǎn)環(huán)境而自動(dòng)調(diào)用不同的地址了

2017年9月22日 18:52