zoukankan      html  css  js  c++  java
  • Vue项目创建build后可修改的配置文件

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

    实现方法如下:

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

    内容为json格式:

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

    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: '<App/>'
     9   })
    10 }).catch((error) => {
    11   console.log('get baseConfig error...' + error)
    12 })

    注意:

    读取配置信息用到了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目录下看到添加的配置文件

  • 相关阅读:
    Pivot Table 实现详解(一)
    VSTS 离线源码版本辅助工具
    早上发现还是问题不断
    VSTS 离线源码版本辅助工具源码
    C#单元测试
    长沙招聘若干 ASP.NET 开发人员(长期有效)
    解析判定数据有效性表达式的存储过程 for SQLServer
    提高 SNAP 网页预览图的采集速度
    用了2年多快3年的老ASUS本子出了点小问题了
    模拟一下细胞的繁殖(CSDN号召帖)
  • 原文地址:https://www.cnblogs.com/jyughynj/p/11207436.html
Copyright © 2011-2022 走看看