博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue项目创建build后可修改的配置文件
阅读量:4625 次
发布时间:2019-06-09

本文共 1148 字,大约阅读时间需要 3 分钟。

需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置。

实现方法如下:

1.在项目的static目录下创建project.config.json文件(名称随意,建议带上config关键字,易于辨识)

内容为json格式:

1 {2   "serviceUrl": "http://localhost:30001/service/api/",3   "baseUrl": "https://192.168.1.161/data/",4   "accessToken": "pk.eyJ1Ijf1w",5   "geoFenceRadius": 20,6   "retrieveInterval": 50007 }

2.在main.js中读取该配置

读取到配置后放入 Vue.prototype.baseConfig中,(baseConfig名称可自定义)

为了保证能在vue实例中配置随时可用,把vue的创建放到了axios读取配置的回调里面。

代码如下:

1 /* eslint-disable no-new */ 2 axios.get('./static/project.config.json').then((result) => { 3   Vue.prototype.baseConfig = result.data 4   new Vue({ 5     el: '#app', 6     router, 7     components: {App}, 8     template: '
' 9 })10 }).catch((error) => {11 console.log('get baseConfig error...' + error)12 })

注意:

读取配置信息用到了axios,需先安装并引入

1 // 命令行安装2 npm install axios -S3 // main.js 引入4 import axios from 'axios'

3.使用配置

  a.组件中使用,因为baseCofig已放入Vue.prototype中,组件中不需要引入,直接使用this获取

1 this.baseConfig.baseUrl

  b. js文件中使用,需要先引入Vue,通过Vue.prototype获取配置

1 import Vue from 'vue'2 let basetConfig = Vue.prototype.baseConfig

4.build后可以在static目录下看的添加的配置文件

 

转载于:https://www.cnblogs.com/jyughynj/p/11207436.html

你可能感兴趣的文章
软件测试
查看>>
Js 提交 form 表单
查看>>
Response.Status http协议状态代码
查看>>
Luogu5405 CTS2019氪金手游(容斥原理+树形dp)
查看>>
BZOJ4925 城市规划
查看>>
Codeforces Round#516 Div.1 翻车记
查看>>
Codeforces Round #521 Div. 3 玩耍记
查看>>
简单计算题:鸡兔同笼
查看>>
linux内核配置与编译
查看>>
Docker---Run命令
查看>>
直角三角形填数
查看>>
This function or variable may be unsafe
查看>>
function Language
查看>>
WEB测试重点--(转载)
查看>>
【C/C++开发】运算符重载二
查看>>
【linux开发】Linux下配置java环境 安装eclipse
查看>>
HTTP入门
查看>>
Android缓存
查看>>
条件语句,while循环语句:完整的温度转换程序
查看>>
9patch图的尺寸尽量为偶数
查看>>