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: './'    

// 在斜杠前加一个点，使它变成相对定位就可以了。

以上总结完毕

webpack 代理配置 开发环境以及生产环境配置

猜你喜欢

webpack 代理配置开发环境以及生产环境配置