Vue 简单配置公用接口地址方式
时间：2022-11-17 10:15:47|栏目：vue|点击： 次
简单配置公用接口地址
有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 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 baseURL
package.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 文件
在和 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('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缓存中，差距人的反应是感受不到的，甚至可能会因为某种原因丢失就得不偿失了
