vue项目配置路径别名和反向代理

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}


module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: port,
    open: false,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `192.168.0.250:18088`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      '/baiduApi': {
        target: 'https://api.map.baidu.com', // 访问地址
        changeOrigin: true,
        secure: false, // 只有代理https 地址需要次选项
        pathRewrite: {
          '^/baiduApi': ''
        }
      }
    },
    disableHostCheck: true
  }, // 反向代理

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        component: path.resolve(__dirname, './src/components'),
        outDic: path.resolve(__dirname, './'),
      }
    }, // 路径别名
    plugins: [
      // 使用gzip解压缩静态文件
      new CompressionPlugin({
        test: /\.(js|css|html)?$/i, // 压缩文件格式
        filename: '[path].gz[query]', // 压缩后的文件名
        algorithm: 'gzip', // 使用gzip压缩
        minRatio: 0.8 // 压缩率小于1才会压缩
      })
    ]
  },

}

使用

import config from "outDic/package.json"

import defaultSettings from "@/settings";

注意：配置完之后需重启项目！！！