阅读 330
Vue项目打包后如何修改请求路径 ?

Vue项目打包后如何修改请求路径 ?

前言

大家在平时的开发中,总会遇到一些内网开发的项目,前端没法连接现场的数据库进行调试;或者甲方要求可以让他们自己去手动配置请求路径;但是Vue项目打包以后,就无法更改里面的请求地址了;

下面教大家一个小技巧,可以在Vue项目打包后,也可以随意的修改请求地址啦!

代码

首先我们在public文件夹里面创建一个文件夹并且新建一个js文件(或者直接新建一个js文件);

image.png

然后在js文件里面定义一个变量,用于配置我们的请求地址;

image.png

然后在public文件夹下面的index.html文件里面去引入这个js文件;

image.png

最后我们在创建axios实例的时候,去设置它的baseURL

需要注意的是,平时我们本地开发的时候可以直接设置为空(或者根据你自己的项目需求去设置请求路径), 但是在打包之前,需要将baseURL替换成我们在之前js中定义的那个变量;

image.png

结尾

可能看到最后一步,大家会有点懵,在axios实例中填写我们自定义的那个变量,它是如何能访问到的?

因为在第三步的时候,我们将自定义的js文件引入public下面的index.html中,自定义的变量,此时就相当于是一个全局变量了,在运行打包命令后,我们整个项目的js部分都会被打包并引入到index.html中(注:public文件夹下面的文件,在打包的时候不会被压缩),所以打包后的axios实例,自然可以访问到我们自定义的变量啦!

image.png

此次分享就结束了,希望能够帮助到大家!!!!

文章分类
前端
文章标签