vue-cli 3.0 配置反向代理与别名

需要在文件根目录手动创建一个vue.config.js文件；

// 用于处理文件与目录的路径；
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  publicPath: "/", //部署应用时的根路径
  devServer: {
    port: 9000, // 端口号
    host: "jianshi.com", // 如需配置本地域名，打开C:\Windows\System32\drivers\etc文件夹，输入自己的ip地址配置即可，如下图
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
	 hotOnly: true, // 热更新
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
      "/api": {
        target: "http://192.168.3.6:8000/v1", //后端接口地址
        ws: false, //websocket；
        changeOrigin: true, //是否允许跨域
        pathRewrite: {
          "^/api": "/", //直接用'api/接口名'进行请求.
        },
      },
    }, // 配置多个代理
  },
  chainWebpack: (config) => {
    config.resolve.alias // 为指定目录设置全局别名
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"));
  },
};

请求接口时写法如下：

axios.get('/api/getCategories').then((res)=>{
})

来源：oschina

链接：https://my.oschina.net/clearcode/blog/4695242