vue3+ts学习（十二）：webpack-Proxy代理与resolve

生产环境跨域，一般都需要跟后端配合解决，而开发环境跨域，就需要前端使用Proxy代理解决

跨域是客户端与服务端之间产生的，后端服务器之间请求是不会有跨域问题的。Proxy就相当于客户端把接口请求代理到一个服务器，让这个服务器去请求目标服务器，再将数据返回的一种解决跨域方案。

假设我们本地前端服务是localhost:8080，请求的后端接口是localhost:8888/search，这个时候就会产生跨域问题，这个时候我们需要在devServer下设置代理配置。

// 在请求地址前加/api做代理匹配
axios.get(/api/search)

// webpack.config.js
devServer:{
    // ...
    proxy: {
      // 匹配开头为/api的接口请求，代理请求http://localhost:8888服务器
      "/api": {
        target: "http://localhost:8888",
        pathRewrite: {
          "^/api": ""   // 代理完后将/api替换为空，获得正确的请求路径
        }
      }
    }
  },

resolve用于设置模块如何被解析，帮助webpack从每个import/require语法中找到正确的模块

// webpack.config.js
resolve: {
    // 导入的文件是否有后缀名，没有会从下列数组中匹配
    extensions: [".js",".json",".mjs",".vue",".ts",".jsx",".tsx"],
    alias: {
      // import { search } from "@/js/index" 可以从src开始查找模块
      "@": path.resolve(__dirname,"./src")
    }
  },