有这样一个场景,在组件库中新增一个配置文件,后续只修改一下配置文件中的配置项就可以实现不同的需求,下面就让我们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. PyCharm2019.3.3专业版完美激活

    在 PYPL 编程语言榜单上,Python 因近几年受欢迎程不断提高而继续霸榜.俗话说“萝卜青菜,各有所爱”,在众多的编辑器当中,因每个人的使用习惯不同,也会选择各自的喜欢的编辑器.Pycharm 分 ...

  2. 曹工说Spring Boot源码(15)-- Spring从xml文件里到底得到了什么(context:load-time-weaver 完整解析)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  3. Linux系统的用户和用户组管理

    一.用户账户管理 Linux/Unix是一个用户.多任务的操作系统:在讲Linux账号及账户组管理之前,先简单了解一下多用户.多任务操作系统的基本概念. Linux的单用户多任务 在Linux下,当你 ...

  4. http请求中的 OPTIONS 多余请求消除,减少的案例

    问题: 项目中遇到移动端发送同样的请求2次,仔细看了一下,有个是options报文. HTTP请求翻一倍,对服务器的性能有较大影响,造成nginx的无畏消耗,需要消除它. 解决思路: 1.上网查看了一 ...

  5. 二、通过工厂方法来配置bean

    调用静态工厂方法创建 Bean是将对象创建的过程封装到静态方法中. 当客户端需要对象时, 只需要简单地调用静态方法, 而不同关心创建对象的细节. 要声明通过静态方法创建的 Bean, 需要在 Bean ...

  6. MySql新版本安装配置

    版本:mysql-5.7.16-winx64 平台Windows 7 x64 1.进入mysql主目录(建议将其移到C或D盘的根目录,并改名为mysql) 2.配置path环境变量(如D:\JAVA\ ...

  7. 关于android 中WebView使用Css

    demo private static final String linkCss = "<link rel=\"stylesheet\" href=\"f ...

  8. Android View如何获取焦点

    Android新启动Activity,dialog或者其他窗体中中包含EditText, 新启动的activity的焦点默认在EditText上,这是android系统会弹出软键盘,挤压activit ...

  9. 机器学习(ML)九之GRU、LSTM、深度神经网络、双向循环神经网络

    门控循环单元(GRU) 循环神经网络中的梯度计算方法.当时间步数较大或者时间步较小时,循环神经网络的梯度较容易出现衰减或爆炸.虽然裁剪梯度可以应对梯度爆炸,但无法解决梯度衰减的问题.通常由于这个原因, ...

  10. Codeforces_816

    A.不断增加时间,直到符合要求. #include<bits/stdc++.h> using namespace std; int a,b; char c; int f(int x) { ...