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

简单配置公用接口地址

首先配置
package.json 文件下的配置
.env.build 和 .env.test 文件
vue.config.js 文件配置

vue接口路径配置

创建文件
axios获取json文件内容

简单配置公用接口地址有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 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"}}

【Vue|Vue 简单配置公用接口地址方式】
.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.jsonawait axios.get('static/config.json').then(res => {console.log(res.data.url)URL = res.data.url})axios()//方法ajax()//方法}

在这样的请求的的时候，在 json文件不混乱的情况下，不需要考虑将内容提前预置在vuex缓存中，差距人的反应是感受不到的，甚至可能会因为某种原因丢失就得不偿失了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。