Vue项目创建build打包后可修改的配置文件
需要一个配置文件,能在项目打包(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打包后可修改的配置文件的更多相关文章
- 记录下自己VUE项目用Hbuider打包后启动白屏问题
刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...
- vue项目使用hbuilder打包后,真机测试白屏
在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
- vue项目用webpack打包后跨域问题
在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin&quo ...
- vue项目在webpack打包后背景图片显示不了
加上 publicPath:'../../'即可
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- VUE项目用hbuilder 打包为手机APP
一.测试项目是否可以正确运行 指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...
- Python Django Vue 项目创建
环境安装忽略,可参考前面个篇幅介绍 1.创建项目 打开pycharm 终端,输入如下,创建项目 # 进入pycharm 项目目录下 cd pyWeb django-admin startproject ...
随机推荐
- C++中静态成员函数和普通成员函数存储方式相同
先从一个示例查看类的创建过程中,静态成员函数和普通成员函数的存储区别. #include "stdafx.h" #include<iostream> #include& ...
- Itellij IDEA下Maven的配置
maven基本配置 配置阿里云镜像 打开settings.xml,添加 <mirrors> <mirror> <id>alimaven</id> < ...
- STM32启动文件详解
启动文件使用的 ARM 汇编指令汇总 启动程序源码注释(点此下载) 1. Stack—栈 Stack_Size EQU 0x00000400 AREA STACK, NOINIT, READWRITE ...
- 设计Qt风格的C++API
在奇趣(Trolltech),为了改进Qt的开发体验,我们做了大量的研究.这篇文章里,我打算分享一些我们的发现,以及一些我们在设计Qt4时用到的原则,并且展示如何把这些原则应用到你的代码里. 优秀AP ...
- poj 3069 继续弱鸡的贪心
题意:给出指路石的范围,问最小需要几个指路石可以覆盖所有的军队. 题解:排序一遍,然后扫出起始区间和终止区间,就可以求出最小的覆盖数了 ac代码: #include <iostream> ...
- (十)SpringBoot之web 应用开发-Servlets, Filters, listeners
一.需求 Web 开发使用 Controller 基本上可以完成大部分需求,但是我们还可能会用到 Servlet. FilterListene 二.案例 2.1 通过注册 ServletRegistr ...
- 从零开始学ios开发(二):Hello World!
今天看了书的第二章,主要介绍了一下Xcode的使用方法和一些必要的说明,最后做了一个“Hello World!”的小程序,其实就是在屏幕上用一个Label显示“Hello World!”,一行代码都没 ...
- JAVA文件IO总结
文件流的操作有两种:字节流.字符流 字节流:FileInputStream,FileInputStream 字符流:InputStreamReader,OutputStreamReader 这两种流对 ...
- GIL锁、进程池与线程池、同步异步
GIL锁定义 GIL锁:Global Interpreter Lock 全局解释器 本质上是一把互斥锁 官方解释: 在CPython中,这个全局解释器锁,也称为GIL,是一个互斥锁,防止多个线程在同 ...
- 关于Objective C的私有函数
(1)很多从其他语言(例如C++)转到objective c的初学者,往往会问到一个问题,如何定义类的私有函数?这里的“私有函数”指的是,某个函数只能在类的内部使用,不能在类的外部,或者派生类内部使用 ...