vue-cli4 中的 vue.congfig.js 的基本配置

一般在 vue.config.js 我们会配置一些代理；或者配置一些 alias 之类的别名，主要用来在项目中方便引入组件。

vue.config.js 的简单配置：

// alias 设置路径别名需要引入 path，定义 resolve
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  //代理配置
  devServer: {
    proxy: {
      "/api": {
        target: "http://122.112.250.17:30080/", // 设置你调用的接口域名和端口号 别忘了加http
        pathRewrite: {
          "^/api": "" // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },
      "/pdm": {
        target: "http://122.112.250.17:30080/",
        pathRewrite: {
          "^/pdm": "" // 这里理解成用‘/pdm’代替target里面的地址，后面组件中我们掉接口时直接用pdm代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/pdm/user/add’即可
        }
      }
      // ...
    }
  },
  // alias 设置路径别名
  chainWebpack: config => {
    config.resolve.alias
      .set("@views",resolve("src/views"))
      //.set("@util",resolve("src/util"))
      //.set("@serversApi",resolve("src/serversApi"))
      //.set("@components",resolve("src/components"))
  }
}