前端env配置与nginx 配置问题记录!

192 阅读1分钟

问题

  • 1,在前端vue 项目中使用npm run build 打包后,nginx 部署后出现下载文件请求路径自动添加了nginx的目录问题.

  • 问题: 部署后访问地址

  • http://100.14.222.44/test/testApi/jixuJilu/getJixuJilu

  • 实际下载所需要的地址

  • http://100.14.222.44/testApi/jixuJilu/getJixuJilu

  • nginx 地址

  • http://100.14.222.44/test/

  • 这里时候我们发现,部署后的地址里面多了一层// test 地址 所有 我们下载文件时候访问不到报错nginx错误,为此,我以为是nginx 配置问题.

  • 真实问题是: 使用axios.get 进行下载的时候

  • 前端写的地址:

  • /testApi/jixuJilu/getJixuJilu

  • 因为前端传入的是相对路径,引起了nginx 的问题,test 是项目的文件夹名字,接口地址是不能相对路径的地址,

- 解决问题点:

  • 接口地址应该是,根据打包部署的环境,获取打包环境的域名+相对地址,或者直接获取页面域名+相对地址,
  • 我们需要使用 axios的base 地址来,拼接相对地址

image.png evn 里面写我们环境的地址 http://http://100.14.222.44 这个地址,不能写/ 目录

这里记录一下 Proxy 只有在本地启服务的是node 服务,上了服务器之后,前端项目使用的nginx 启动的服务,所以Proxy就不起作用了.Vue.config 文件也只在node服务下通过webpack启动起来的.