vue项目发布上线，外部修改公共路径，不用每次都进行打包部署

项目需求要想修改整体的后台接口域名，不用更改路径之后，每次发布都要打包部署。

参考：https://blog.csdn.net/qq_41772754/article/details/88106508

这个大神是真的写的很好，但是我自己引用的时候，出现了刷新就报错，然后不能用的问题。因为我做的项目基本弄完了，不好改动太多。就参照大神写的，改了。

比较详细的解释说明请参照https://blog.csdn.net/qq_41772754/article/details/88106508  写的，他写的很详细的。下面是我自己写的，给大家一个参考：

具体的方法如下：
1.在项目中找到static文件夹，在里面创建一个配置文件，起名为config.js

2.然后再src里面放axios的配置文件

（api.js里面我放置的是跨域封装和接口拦截设置等，globalData里面放的是后台的接口） 

下面就放api代码吧

/* 1.引入文件 */

import axios from 'axios' //引入 axios库

import qs from 'qs' //引入 node中自带的qs模块（数据格式转换）

/* 2.全局默认配置 */

let baseURL

// 判断开发环境（一般用于本地代理）

if (process.env.NODE_ENV === 'development') { // 开发环境

baseURL = glodApi.devUrl // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理

// baseURL = window.Glob.BaseUrl

} else { // 编译环境

if (process.env.type === 'test') { // 测试环境

baseURL = glodApi.BaseUrl

} else { // 正式环境

baseURL = glodApi.BaseUrl

}

}

// 配置axios的属性

const Axios = axios.create({

baseURL: baseURL, // 后台服务地址

timeout: 60000, // 请求超时时间1分钟

//responseType: "json",

withCredentials: false // 是否允许带cookie这些

});

// 可在此处配置请求头信息

//config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

/* 3.设置拦截器 */

Axios.interceptors.request.use((config) => {

// 发送请求前进行拦截

if (config.method == "post") {

if (config.data.Params) {

config.data.Params = JSON.stringify(config.data.Params)

}

config.data = qs.stringify(config.data)

}

return config;

}, (error) => {

console.log("错误的传参", 'fail');

return Promise.reject(error)

})

//请求响应后拦截

Axios.interceptors.response.use((res) => {

if (res.status == 200) { // 对响应数据做些事

if (Object.prototype.toString.call(res.data) === '[object Object]' && res.data.ReturnList == null) {

res.data.ReturnList = []

}

if (res.data.ReturnCode == 0 || Object.prototype.toString.call(res.data) !== '[object Object]') {

return res.data

} else {

return Promise.reject(res)

}

}

return res;

}, (error) => {

//alert("网络异常!") 404等问题可以在这里处理

return Promise.reject(error)

})

function sysApiUrl(api, data) {

return Axios({

url: api,

method: "post",

headers: {

'Content-Type': 'application/x-www-form-urlencoded' //设置请求头请求格式form

},

data: data

})

}

export default {

axios_http(url, params) {

return sysApiUrl(url, params);

},

}

在界面上引用：

我在main.js全局引用了sysApiUrl

所以在界面上用this.$.....就好了

ps：也可以用另起一个js文件，里面直接写封装的axios

// index.js

界面上：

url：'/login'

data：传给后台的参数 

最后

以上就是犹豫小鸽子为你收集整理的vue项目发布上线，外部修改公共路径，不用每次都进行打包部署的全部内容，希望文章能够帮你解决vue项目发布上线，外部修改公共路径，不用每次都进行打包部署所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。