Vue组件库读取自定义配置文件

　　有这样一个场景，在组件库中新增一个配置文件，后续只修改一下配置文件中的配置项就可以实现不同的需求，下面就让我们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组件库读取自定义配置文件

最新文章

热门文章