webpack 代理配置 開發環境以及生產環境配置

最近在使用webpack的時候踩了很多的坑，查詢了很多複製的文章，毫無營養沒有幫助，在此做一些自己的理解和整理，希望對碰到和我一樣情況的人有所幫助

先講一下代理是怎麼設置的

在webpack的文件夾config/index.js中，找到dev

通過proxyTable來設置代理，以下爲代碼和註解

proxyTable: {
    '/apis/*': {    // 設置請求前增加的值，這個值會代替我們的網址進行請求
    // target: 'http://192.168.89.88:8986',    // 有多個後端的時候，註釋可以方便切換
    target: 'http://192.168.89.88:7278',    // 這個就是我們設置的代理服務器地址
    changeOrigin: true,                    // 這個值就是用來跨域的，默認爲false
    pathRewrite: {'^/apis': 'apis'}        // 實現替換的，將apis替換成apis,也可以設置爲空
    }
}

假設我們的請求爲 /apis/login
以上代碼會將我們的請求替換成                    http://192.168.89.88:7278/apis/login    
如果pathRewrite爲{'^/apis': ''}結果就是        http://192.168.89.88:7278/login 

但是如果我們在網頁中調試的時候實際上會發現地址是本地服務器地址加請求，如下
我們的本地服務器爲 localhost:8080              http://localhost:8080/apis/login

實際上不會有影響，我們還是以http://192.168.89.88:7278來進行代理請求的，只是字面還是我們的本地服務器

 

以上代理結束，接下來介紹一下怎麼配置開發環境和生產環境，目前本人只知道在不跨域的情況下怎麼使用，如果需要生產環境跨域的，以下信息對你的需要是無效的

首先我們需要配置生產環境和開發環境使用的接口

config/dev.env.js(這裏是主要的，配置開發環境的接口，以及生產環境接口所在的地址)

'use strict'    // 默認生成的
var merge = require('webpack-merge')    // 需要引入webpack-merge來幫助我們，一般安裝都會自帶
var prodEnv = require('./prod.env')     // 指明生產環境接口所在的地址位置

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"//192.168.89.88:7278"',    // 這裏就是配置我們開發接口的地方
})

config/prod.env.js(這裏配置生產地址)

'use strict'    // 默認生成的
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"//192.168.89.88:8986"'    // 配置生產地址
}

main.js(給axios設置生產和開發地址)

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios

axios.defaults.baseURL = process.env.BASE_API    // 需要使用代理就把他註釋掉，切換很方便


// 設置完之後，就可以使用npm run dev    執行開發環境（不跨域，跨域請使用代理）
//                     npm run build  打包生產環境

如果在打包好上傳後，網頁不顯示，或者報404，在檢查中可以看到自己的網頁標籤，一般是定位的問題，解決辦法如下

config/index.js中的build中

assetsPublicPath: './'    

// 在斜槓前加一個點，使它變成相對定位就可以了，但是如果是需要使用代理的情況，需要在打包好之後，在改回來，不然代理會出問題

以上總結完畢