有这样一个场景,在组件库中新增一个配置文件,后续只修改一下配置文件中的配置项就可以实现不同的需求,下面就让我们I一起来实现吧。

  (一)在在项目的根目录(package.json所在目录)中创建一个vue.config.js文件,创建一个static文件夹,并在该文件夹中创建一个config.js文件,文件结构目录如下所示:

     

  (二)在vue.config.js文件添加这样的内容:

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') module.exports = {
// 将构建好的文件输出到哪里
outputDir: './dist',
configureWebpack: {
plugins: [
// 需要用到拷贝文件的插件
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './static'),
to: '.',
ignore: ['.*']
}
])
]
}
}

  (三)在config.js文件中添加类似这样的内容:

module.exports = {
NAME: '百度',
URL: 'http://www.baidu.com'
}

  也就是说内容格式要符合json格式,该文件可以作为一些灵活的配置项管理,提供给其它文件使用。

  (四)编译后生成的组件库目录下会有config.js文件,效果如下图所示:

  我们看到了在dist目录下有config.js文件了,其内容跟之前添加的一样。

  (五)说明:配置文件除了采用js文件,也可以采用json文件,类似于package.json文件。

module.exports = {
// 将构建好的文件输出到哪里
outputDir: './dist',
configureWebpack: {
plugins: [
// 需要用到拷贝文件的插件
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './static'),
to: '.',
ignore: ['.*']
}
])
]
}
}

Vue组件库读取自定义配置文件的更多相关文章

  1. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  2. 滴滴开源 Vue 组件库— cube-ui

    cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...

  3. Springboot读取自定义配置文件的几种方法

    一.读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件,读取这两个配置文件的方法有两种,都比较简单. ...

  4. 利用webpack打包自己的第一个Vue组件库

    先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...

  5. vue组件库用markdown生成文档

    前言: 开发vue组件库需要提供组件的使用文档,最好是有渲染到浏览器的demo实例,既能操作又能查看源代码.markdown作为常用的文档编写载体,如果能在里面直接写vue组件,同时编写使用说明就再好 ...

  6. ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!

    前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...

  7. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  8. 一、移动端商城 Vue 组件库

    一.组件库 移动端商城 Vue 组件库

  9. 发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下

    发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下:https://segmentfault.com/a/1190000011377961 vantUI框架在vue项目中的应用 ...

随机推荐

  1. C语言的体系结构--main函数存在的必然性(听杨力祥老师的课)

    注:不是原创,课堂上听来的,防止遗忘,所以记下来! C语言包括两个部分:数据和函数,当然最终这两个部分都是要进入到计算机的内存中去. 函数在编译后生成可执行代码,存放在代码区:数据分为几种:局部与全局 ...

  2. 读取纯真IP数据库

    #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <stdli ...

  3. 基于 H5与WebGL 的科幻风机 3D 展示

    前言 许多世纪以来,风力机同水力机械一样,作为动力源替代人力.畜力,对生产力的发展发挥过重要作用.近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机发电机的发展缓慢下来. 70年代初期, ...

  4. 详解python的装饰器decorator

    装饰器本质上是一个python函数,它可以让其它函数在不需要任何代码改动的情况下增加额外的功能. 装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志,性能测试,事务处理,缓存, ...

  5. HDU_2167_状态压缩dp

    http://acm.hdu.edu.cn/showproblem.php?pid=2167 第一道状态压缩dp,其实就是爆搜,只不过把排除了大量不可能的情况,先用sta保存每行可能的情况,sum[i ...

  6. java设计模式7——桥接模式

    java设计模式7--桥接模式 1.桥接模式介绍 桥接模式是将抽象部分与它的实现部分分离,使他们都可以独立的变化.它是一种对象结构型模式,又称为柄体模式或接口模式. 2.解决问题 2.1.将复杂的组合 ...

  7. 小cookie,大智慧

    Cookie是什么?cookies是你访问网站时创建的数据片段文件,通过保存浏览信息,它们使你的在线体验更加轻松. 使用cookies,可以使你保持在线登录状态,记录你的站点偏好,并为你提供本地化支持 ...

  8. 一个基于图的数据管理系统-gStore

    gStore是遵循 BSD协议的一个开源项目.一个基于图的 RDF 三元组存储的数据管理系统.该项目是北京大学.滑铁卢大学.香港科技大学的联合研究项目.中国北京大学计算机科学与技术研究所的数据库组对该 ...

  9. centos6.5下部署sersync+rsync --daemon同步数据

    rsync --daemon端配置 [root@rsync-daemon etc]# /etc/init.d/iptables stop [root@rsync-daemon ~]# dos2unix ...

  10. window下建立vue.js项目

    安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...