首页 > 其他 > 详细

Vue项目创建build后可修改的配置文件

时间:2021-08-13 17:18:42      阅读:11      评论:0      收藏:0      [点我收藏+]

https://www.cnblogs.com/jyughynj/p/11207436.html

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

实现方法如下:

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

技术分享图片

 

 内容为json格式:

{
  "serviceUrl": "http://localhost:30001/service/api/",
  "baseUrl": "https://192.168.1.11/data/",
  "accessToken": "pk.eyJ1Ijf1w",
  "geoFenceRadius": 20,
  "retrieveInterval": 5000
}

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

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

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

代码如下:

/* eslint-disable no-new */
axios.get(‘./static/project.config.json‘).then((result) => {
  Vue.prototype.baseConfig = result.data
  new Vue({
    el: ‘#app‘,
    router,
    components: {App},
    template: ‘<App/>‘
  })
}).catch((error) => {
  console.log(‘get baseConfig error...‘ + error)
})

注意:

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

1 // 命令行安装
2 npm install axios -S
3 // 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 //注意该行应放在export里面,否则获取不到值

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

 技术分享图片

 

Vue项目创建build后可修改的配置文件

原文:https://www.cnblogs.com/LcxSummer/p/15137514.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!