Vue简单配置公用接口地址方式
短信预约 -IT技能 免费直播动态提醒
简单配置公用接口地址
有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 npm run build 判断
首先配置
先新建一个 config.js 的文件
- 开发环境: 说明在本地测试的时候链接的地址
- 测试环境: 说明是根据 npm run test 进行判断
- 生产环境: 说明是已经部署到线上的代码 npm run build
let baseURL = ''
if (process.env.NODE_ENV === 'production') {
//根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
if (process.env.VUE_APP_TITLE === 'production') {
//production 生产环境
baseURL = 'http://192.168.10.111:8080/zhikong'
} else {
//test 测试环境
baseURL = ''
}
} else {
//development 开发环境
baseURL = 'http://192.168.10.12:8080/zhikong'
}
export default baseURLpackage.json 文件下的配置
根据不同的指示来说明具体去调用哪个接口地址
{
"scripts": {
"serve": "vue-cli-service serve",
// 根据不同的指示来说明具体去调用那个接口地址
"build": "vue-cli-service build --mode build",
"test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
}
}.env.build 和 .env.test 文件
在和 class="lazy" data-src 文件夹同级的根目录下新建 .env.build 和 .env.test 文件
.env.build
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'.env.test
NODE_ENV = 'production'
VUE_APP_TITLE = 'test'vue.config.js 文件配置
npm run build 根据环境生成不同打包的文件夹
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: './',
// `npm run build` 根据环境生成不同打包的文件夹
outputDir: process.env.VUE_APP_TITLE === 'production' ? 'dist-zhikong' : 'test',
assetsDir: "",
indexPath: 'index.html',
filenameHashing: true,
lintOnSave: false,
runtimeCompiler: false,
transpileDependencies: [],
productionSourceMap: false,
integrity: false,
configureWebpack:{
resolve:{
alias:{
'@': resolve('class="lazy" data-src'),
}
}
},
devServer:{
port:8080,
host:'0.0.0.0',
open:true,
https:false,
overlay: {
warnings: true,
errors: true
}
}
}vue接口路径配置
在个人开发中，大多说vue的封装是固定形式
是写在文件中，切不可更改
例：
URL: 'http://127.0.0.1:8182/',
axios()//方式
ajax()//方式如何在项目封装后依然可以更改？
创建文件
在根目录下创建static文件夹（现版本要放在public中，哪个行用哪个）
并创建config.json文件
{
"name": "static",
"version": "1.0.0",
"url": "http://127.0.0.1:8183/",
"dependencies": {},
}在json中可以放版本号，项目名、后台路径、以及文件路径
axios获取json文件内容
使用async await进行同步请求
export default async function request(config) {
//public/config.json
await axios.get('static/config.json').then(res => {
console.log(res.data.url)
URL = res.data.url
})
axios()//方法
ajax()//方法
}在这样的请求的的时候，在 json文件不混乱的情况下，不需要考虑将内容提前预置在vuex缓存中，差距人的反应是感受不到的，甚至可能会因为某种原因丢失就得不偿失了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
