vue基于proxy实现服务器反向代理功能

测试时使用的时vue-cli:3.0,只在测试环境中使用,正式环境下还是需要使用nginx

在vue-config.js文件中配置

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  // 基本路径
  publicPath:"./",  // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径
  outputDir:"dist",  //打包时生成的生产环境构建文件的目录
  assetsDir: 'public',  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  devServer: {
    proxy: {
        '/api': {     //这里最好有一个 /
            target: 'http://192.168.1.109',  // 后台接口域名
            // ws: true,        //如果要代理 websockets，配置这个参数
            // secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/api':''
            }
        }
    }
  },
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            compress: {
              pure_funcs: ["console.log", "console.debug"], //移除console
            },
          },
        }),
      ],
    },
  },
};

在调用接口时写法

async created() {
    var {data: res} = await this.$http.post(`/wechat/parentMsglist`)
    console.log(res)
  },

建议配置axios请求根路径

import axios from 'axios'
axios.defaults.baseURL = /api'

如果出现报错,需要在package.json文件中配置

"scripts": {
    "start": "node index.js",
    "server": "nodemon index.js --ignore client"
  },