vue接口请求怎么配置请求的地址,vue端口配置
本文主要介绍了Vue中公共接口地址的简单配置，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
只需配置公共接口地址。首先配置配置。环境构建和。package.json文件下的env.test文件。文件配置vue.config.js接口路径配置创建文件axios获取json文件内容。
简单配置公用接口地址
有时候本地和在线需要不同的接口地址，可以根据npm run build来判断。
首先配置
首先创建一个新的config.js文件。
开发环境：说明本地测试时的链接地址测试环境：说明是根据npm运行测试判断的；生产环境：说明这是npm运行buildlet baseURL=
if(process . ENV . node _ ENV=== production ){
//根据中的VUE_APP_FLAG判断是生产环境还是测试环境。环境文件。
if(process . env . vue _ APP _ TITLE=== production ){
//生产生产环境
baseURL= http://192 . 168 . 10 . 111:8080/zhi kong
}否则{
//测试测试环境
baseURL=
}
}否则{
//开发开发环境
baseURL= http://192 . 168 . 10 . 12:8080/zhi kong
}
导出默认基本URL
package.json 文件下的配置
根据不同的指令解释调用哪个接口地址。
{
脚本:{
serve: vue-cli-service serve ，
//根据不同的指令解释调用哪个接口地址。
build : vue-CLI-服务构建-模式构建，
测试: vue-CLI-服务构建模式测试，
lint : vue-CLI-服务lint
}
}
.env.build 和 .env.test 文件
在与src文件夹相同的根目录中创建新的env.build和env.test文件。
.env.build
NODE_ENV=生产
VUE应用标题=生产
.env.test
NODE_ENV=生产
VUE应用标题=测试
vue.config.js 文件配置
Npm运行构建根据环境生成不同的打包文件夹。
const path=require(path )
函数解析(目录){
返回path.join(__dirname，dir)
}
模块.导出={
公共路径：“”。/,
//` NPM运行构建`根据环境生成不同的打包文件夹
output dir:process . env . vue _ APP _ TITLE=== production ？dist-zhikong :测试，
资产目录： ，
indexPath: index.html ，
filenameHashing: true，
lintOnSave:假的，
runtimeCompiler: false，
transpileDependencies: []，
productionSourceMap: false，
诚信：虚假，
configureWebpack:{
解决：{
别名：{
@: resolve(src )，
}
}
},
devServer:{
端口：8080，
主机：“0.0.0.0”，
开：真的，
https:假，
覆盖：{
警告：真，
错误：真
}
}
}
vue接口路径配置
在个人发展中，大多说vue的封装是固定的形式。
它写在文件中，不得更改。
示例：
网址： http://127.0.0.1:8182/，
Axios()//way
Ajax()//way
项目打包后怎么还能改？
创建文件
在根目录中创建一个静态文件夹(当前版本应该放在public中，应该使用哪一行)
并创建config.json文件
{
名称:静态，
版本: 1.0.0 ，
网址: http://127.0.0.1:8183/，
依赖关系“:{}，
}
可以在json中放版本号，项目名，后台路径，文件路径。
axios获取json文件内容
使用异步软件发出同步请求。
导出默认异步函数请求(配置){
//public/config.json
await axios . get( static/config . JSON )。然后(res={
console.log(res.data.url)
URL=res.data.url
})
Axios()//方法
Ajax()//方法
}
在这样的请求的时候，没有json文件的混淆，就不需要考虑预先预置vuex缓存中的内容。gap人的反应是不会被感觉到的，甚至可能会因为某种原因而迷失。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。