vue-cli3打包后分离配置文件

2018-12-07 admin

vue-cli3下将请求地址的配置文件分离出来以便于打包后可动态修改请求地址; 基本思路: 1.在public文件下新建serverConfig.json { "production":"https://www.easy-mock.com/mock/5bd2d48f3e503e20f0011196/testUrl", "develop":"https://www.easy-mock.com/mock/5bd2d48f3e503e20f0011196/testUrl" }; 2.在main.js中请求serverConfig.json文件, `function getServerConfig () { return new Promise ((resolve, reject) => {

axios.get('./serverConfig.json').then((result) => {
  let config = result.data;
  let ajaxUrl = process.env.NODE_ENV == 'production' ? config.production:config.develop;
  Vue.prototype.$ajaxUrl=ajaxUrl; //设置全局
  store.commit('setAjaxUrl',ajaxUrl);//存储到vuex中
  resolve();
}).catch((error) => {
  console.log(error)
  reject()
})

}) } async function init() { await getServerConfig(); new Vue({

router,
store,
render: h => h(App),

}).$mount(’#app’) } init(); ` 请求路径就直接用$ajaxUrl就可以了。 只所以存储到vuex中,是因为,如果你封装了request请求,无法直接获取到请求的地址,也无法用到全局$ajaxUrl,只能从vuex中获取,如果没有封装,直接用$ajaxUrl就可以

原文链接:https://segmentfault.com/a/1190000017270334

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47518.html

文章标题:vue-cli3打包后分离配置文件

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, ...
2017-03-20
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
回到顶部