Vue 打包后,如果想修改整体的后台接口域名,或者图片文件的路径,就需要在源代码中修改后,再次进行build打包。这样很不灵活,先看一下vue打包后的文件结构:

项目打包后会生成一个dist文件夹
在这里插入图片描述

dist中有一个存放外部资源的static,它里面的文件是不会被打包编译的,
所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入,也就是将图中的config.js引入到项目里的index.html中使用,然后就可以全局使用。
在这里插入图片描述
项目中使用到的文件大致有上图几个
1,首先在static中创建一个config.js文件
2,然后在创建的config.js配置文件中,声明一个对象Glob,将它赋值给window,对象名字随便取,只要不占用关键字即可,对象中存放你所需要配置的各种路径和数据,如下:

这里说明下,赋值给window,在vue里面获取不到window对象。所以不要赋值给window,直接定义个常量就好。

/*window.Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(这里是window对象)
.......
}
*/
const Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(常量就可以)
.......
}

3,将此配置文件在index.html 文件中引入
在这里插入图片描述
4,axios 配置文件(这里我写在了utils下的request.js里了,这里封装了axios)

import axios from "axios";

let baseURL
baseURL = Glod.BaseUrl

const service = axios.create({
    baseURL:baseURL ,
    timeout: 115000 // request timeout
});

如果你的项目里没有图片或者导出之类的需要别的路径的话,到此就结束了

如果有图片或者导出等其他需要单独调用的接口如下:
在config.js中定义好路径

const Glod = {
BaseUrl:"http://xxx.api.com", // 你的接口路径(常量就可以)
picUrl: "http://xxx.api.com", //图片
exportUrl: "http://xxx.api.com"	//导出
.......
}

然后在要用的页面或组件里直接引入使用

在这里插入图片描述
就可以了

本文借鉴了webpack打包vue项目后,配置可以修改的配置文件

因为项目中还有图片和导出等需要单独调用的地址,所以在此基础上做了一些修改

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐