需要一个配置文件,能在项目打包(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,需先安装并引入

 // 命令行安装
npm install axios -S
// main.js 引入
import axios from 'axios'

3.使用配置

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

 this.baseConfig.baseUrl

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

 import Vue from 'vue'
let basetConfig = Vue.prototype.baseConfig //注意该行应放在export里面,否则获取不到值

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

Vue项目创建build打包后可修改的配置文件的更多相关文章

  1. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  2. vue项目使用hbuilder打包后,真机测试白屏

    在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...

  3. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  4. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  5. vue项目用webpack打包后跨域问题

    在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin&quo ...

  6. vue项目在webpack打包后背景图片显示不了

    加上 publicPath:'../../'即可

  7. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  8. VUE项目用hbuilder 打包为手机APP

    一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...

  9. Python Django Vue 项目创建

    环境安装忽略,可参考前面个篇幅介绍 1.创建项目 打开pycharm 终端,输入如下,创建项目 # 进入pycharm 项目目录下 cd pyWeb django-admin startproject ...

随机推荐

  1. C++中静态成员函数和普通成员函数存储方式相同

    先从一个示例查看类的创建过程中,静态成员函数和普通成员函数的存储区别. #include "stdafx.h" #include<iostream> #include& ...

  2. Itellij IDEA下Maven的配置

    maven基本配置 配置阿里云镜像 打开settings.xml,添加 <mirrors> <mirror> <id>alimaven</id> < ...

  3. STM32启动文件详解

    启动文件使用的 ARM 汇编指令汇总 启动程序源码注释(点此下载) 1. Stack—栈 Stack_Size EQU 0x00000400 AREA STACK, NOINIT, READWRITE ...

  4. 设计Qt风格的C++API

    在奇趣(Trolltech),为了改进Qt的开发体验,我们做了大量的研究.这篇文章里,我打算分享一些我们的发现,以及一些我们在设计Qt4时用到的原则,并且展示如何把这些原则应用到你的代码里. 优秀AP ...

  5. poj 3069 继续弱鸡的贪心

    题意:给出指路石的范围,问最小需要几个指路石可以覆盖所有的军队. 题解:排序一遍,然后扫出起始区间和终止区间,就可以求出最小的覆盖数了 ac代码: #include <iostream> ...

  6. (十)SpringBoot之web 应用开发-Servlets, Filters, listeners

    一.需求 Web 开发使用 Controller 基本上可以完成大部分需求,但是我们还可能会用到 Servlet. FilterListene 二.案例 2.1 通过注册 ServletRegistr ...

  7. 从零开始学ios开发(二):Hello World!

    今天看了书的第二章,主要介绍了一下Xcode的使用方法和一些必要的说明,最后做了一个“Hello World!”的小程序,其实就是在屏幕上用一个Label显示“Hello World!”,一行代码都没 ...

  8. JAVA文件IO总结

    文件流的操作有两种:字节流.字符流 字节流:FileInputStream,FileInputStream 字符流:InputStreamReader,OutputStreamReader 这两种流对 ...

  9. GIL锁、进程池与线程池、同步异步

    GIL锁定义 GIL锁:Global Interpreter Lock  全局解释器 本质上是一把互斥锁 官方解释: 在CPython中,这个全局解释器锁,也称为GIL,是一个互斥锁,防止多个线程在同 ...

  10. 关于Objective C的私有函数

    (1)很多从其他语言(例如C++)转到objective c的初学者,往往会问到一个问题,如何定义类的私有函数?这里的“私有函数”指的是,某个函数只能在类的内部使用,不能在类的外部,或者派生类内部使用 ...