Vue3.X项目配置问题- axios 代理地址等

Vue-cli3.x 以后的项目结构及配置

      • 这里主要是配置axios的本地代理访问地址

Vue3.X项目配置问题- axios 代理地址等_第1张图片
项目的基础配置文件创建项目后默认好像是没有生成的,需要自己手动创建这个文件
还有两个生产地址和开发地址的配置文件也需要自己手动创建
.env.development 开发地址配置文件
.env.production 生产地址配置文件

具体详细的配置信息请看官方文档
添加链接描述

这里主要是配置axios的本地代理访问地址

因为axios的请求地址默认是本地路径 localhost:8080
想要修改最方便的方式就是使用代理了 proxy

module.exports = {
    devServer: {
      hotOnly: true,
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:8899',   //代理接口
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''    //代理的路径
          }
        }
      }
  }
}

这里的/api 是个标识不是你实际接口的地址你只要你所有的接口地址加上这个前缀就行了、
Vue3.X项目配置问题- axios 代理地址等_第2张图片
这里在配置axios的时候直接在baseURL上加上就好了,一步到位!
还有这个Qs 用来处理所有请求参数的序列化,主要就是 Qs.stringify() 和Qs.parse()

还有这里因为es-lint配置项的默认原因 项目中使用console.log 是会报错的
Vue3.X项目配置问题- axios 代理地址等_第3张图片
这里在package.json 文件中 配置 “no-console”: “off” 关闭就好了

你可能感兴趣的:(vue.js,前端)