首页 >> js开发 >> jsvue项目接口域名动态获取操作js大全
jsvue项目接口域名动态获取操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
需求：需求：接口域名是从外部 .json 文件里获取的。思路：思路：在开始加载项目前 进行接口域名获取，然后重置 接口域名的配置项。实现：实现：1、config/index.js 文件 进行基础配置
import axios from 'axios'
const config = {
requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址
baseUrl: {
dev: '/api/',
pro: 'http://xxx.com/' // 接口域名，会被动态覆盖
},
requestRemoteIp: () => { // 动态获取
return new Promise((resolve, reject) => {
axios.get(config.requestUrl).then(response =>
{
config.baseUrl.pro = response.data.data.path;
config.img.domain = config.baseUrl.pro;
resolve()
}, err => {
reject()
});
});
}
}
export default config
import axios from 'axios'
const config = {
requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址
baseUrl: {
dev: '/api/',
pro: 'http://xxx.com/' // 接口域名，会被动态覆盖
},
requestRemoteIp: () => { // 动态获取
return new Promise((resolve, reject) => {
axios.get(config.requestUrl).then(response =>
{
config.baseUrl.pro = response.data.data.path;
config.img.domain = config.baseUrl.pro;
resolve()
}, err => {
reject()
});
});
}
}
export default config
2、项目下main.js 文件 进行动态获取
import config from '@/config/index.js'
// 读取接口域名
config.requestRemoteIp().finally(res => {
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '
})
});
import config from '@/config/index.js'
// 读取接口域名
config.requestRemoteIp().finally(res => {
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '
})
});
3、请求数据
const instance = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
})
const instance = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
})补充知识：webpack + vue 打包生成公共配置文件（域名） 方便动态修改补充知识：补充知识：webpack + vue 打包生成公共配置文件（域名） 方便动态修改需求原因需求原因原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。第一步 安装插件 第一步 安装插件
npm install --save-dev generate-asset-webpack-plugin
npm install --save-dev generate-asset-webpack-plugin第二步 新建配置文件第二步 新建配置文件在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件
{"ProdUrl":"http://text.com"}
{"ProdUrl":"http://text.com"}第三步 引入generate-asset-webpack-plugin第三步 引入generate-asset-webpack-plugin在build/webpack.prod.conf.js中添加
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件
const createJson = function() {
return JSON.stringify(serverConfig);
};
//plugins 中使用
plugins: [
//打包时生成一个配置文件
new GenerateAssetPlugin({
filename: 'serverConfig.json',
fn: (compilation, cb) => {
cb(null, createJson());
},
}),
]
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件
const createJson = function() {
return JSON.stringify(serverConfig);
};
//plugins 中使用
plugins: [
//打包时生成一个配置文件
new GenerateAssetPlugin({
filename: 'serverConfig.json',
fn: (compilation, cb) => {
cb(null, createJson());
},
}),
]
第四步 使用配置文件中的内容第四步 使用配置文件中的内容这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用。在main.js 中vue实例初始化之前将baseURL存到本地
axios.get('serverConfig.json').then( e => {
let baseURL = e.data.ProdUrl
localStorage.setItem("baseURL", baseURL);
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
})
axios.get('serverConfig.json').then( e => {
let baseURL = e.data.ProdUrl
localStorage.setItem("baseURL", baseURL);
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
})由于是使用axios获取，是异步方法，根据情况进行处理。、好了接下来就再也不用为了域名每天build了打包后的目录以上这篇vue项目接口域名动态获取操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
import axios from 'axios'
const config = {
requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址
baseUrl: {
dev: '/api/',
pro: 'http://xxx.com/' // 接口域名，会被动态覆盖
},
requestRemoteIp: () => { // 动态获取
return new Promise((resolve, reject) => {
axios.get(config.requestUrl).then(response =>
{
config.baseUrl.pro = response.data.data.path;
config.img.domain = config.baseUrl.pro;
resolve()
}, err => {
reject()
});
});
}
}
export default config
import axios from 'axios'
const config = {
requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址
baseUrl: {
dev: '/api/',
pro: 'http://xxx.com/' // 接口域名，会被动态覆盖
},
requestRemoteIp: () => { // 动态获取
return new Promise((resolve, reject) => {
axios.get(config.requestUrl).then(response =>
{
config.baseUrl.pro = response.data.data.path;
config.img.domain = config.baseUrl.pro;
resolve()
}, err => {
reject()
});
});
}
}
export default config
2、项目下main.js 文件 进行动态获取
import config from '@/config/index.js'
// 读取接口域名
config.requestRemoteIp().finally(res => {
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '
})
});
import config from '@/config/index.js'
// 读取接口域名
config.requestRemoteIp().finally(res => {
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '
})
});
3、请求数据
const instance = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
})
const instance = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
})补充知识：webpack + vue 打包生成公共配置文件（域名） 方便动态修改补充知识：补充知识：webpack + vue 打包生成公共配置文件（域名） 方便动态修改需求原因需求原因原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。第一步 安装插件 第一步 安装插件
npm install --save-dev generate-asset-webpack-plugin
npm install --save-dev generate-asset-webpack-plugin第二步 新建配置文件第二步 新建配置文件在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件
{"ProdUrl":"http://text.com"}
{"ProdUrl":"http://text.com"}第三步 引入generate-asset-webpack-plugin第三步 引入generate-asset-webpack-plugin在build/webpack.prod.conf.js中添加
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件
const createJson = function() {
return JSON.stringify(serverConfig);
};
//plugins 中使用
plugins: [
//打包时生成一个配置文件
new GenerateAssetPlugin({
filename: 'serverConfig.json',
fn: (compilation, cb) => {
cb(null, createJson());
},
}),
]
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件
const createJson = function() {
return JSON.stringify(serverConfig);
};
//plugins 中使用
plugins: [
//打包时生成一个配置文件
new GenerateAssetPlugin({
filename: 'serverConfig.json',
fn: (compilation, cb) => {
cb(null, createJson());
},
}),
]
第四步 使用配置文件中的内容第四步 使用配置文件中的内容这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用。在main.js 中vue实例初始化之前将baseURL存到本地
axios.get('serverConfig.json').then( e => {
let baseURL = e.data.ProdUrl
localStorage.setItem("baseURL", baseURL);
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
})
axios.get('serverConfig.json').then( e => {
let baseURL = e.data.ProdUrl
localStorage.setItem("baseURL", baseURL);
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
})由于是使用axios获取，是异步方法，根据情况进行处理。、好了接下来就再也不用为了域名每天build了打包后的目录以上这篇vue项目接口域名动态获取操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
