一、axios数据请求封装
env.js
request.js
api.js
二、生产环境,开发环境切换
1.第一种方法:通过配置.env文件来实现
参考:.html
第二种方法
第一步:通过创建不同环境js文件,再通过cross-env来切换
config
dev.js
prod.js
dev.js
ports = {
BASE_URL: “”
};
prod.js
第二步:安装cross-env并在package.json中配置要传递的参数
npm install cross-env -D
package.json中配置
“scripts”: {
“serve”: “cross-env BUILD_ENV=dev vue-cli-service serve”,
“build”: “cross-env BUILD_ENV=prod vue-cli-service build”
}
第三步:修改fig.js添加对webpack的配置
ports = {
…
chainWebpack: config => {
config.plugin(“define”).tap(args => {
args[0][‘v’].BUILD_ENV = JSON.v.BUILD_ENV);
return args;
});
}
};
在业务代码做环境的切换
//读取v常量对象中的BUILD_ENV
const envType = v.BUILD_ENV;
const urlObj = require(../config/${envType}.js
);
//创建一个axios实例
const service = ate({
baseURL: urlObj.BASE_URL + vipUrl
});
三、过滤器与moment日期库的使用
过滤器
1.全局过滤器
定义:
Vue.filter(‘过滤器名称’,function(a,b,c) {
//....return ...
})
使用:
{{ num | 过滤器名称(v1,v2) }}
2.局部过滤器
3.总结:过滤器使用场景:用于将后台数据处理成用户最终显示的数据格式
例如:性别,支付状态,物流状态,时间戳。。。。。。
moment
moment官网:/
npm i moment
格式: moment(时间戳).format(“YYYY年MM月DD日,HH时mm分SS秒”);
格式显示:/
本文发布于:2024-01-31 22:07:22,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170671004531690.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |