Vue 简单配置公用接口地址方式

来源：jb51　　时间：2022/3/29 16:19:03　　对本文有异议

简单配置公用接口地址

有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 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()//方法
}