关于vue引入静态文件的相关配置和多大的文件转换为base64的相关配置记录

vue引入静态文件报错的问题

vue在引入静态文件（以pdf为例）会出现报错的问题，那是因为需要在vue.config.js里面进行一些相关webpack loader的配置

 module:{
    rules:[
        {
            test:/\.pdf$/,
            use:[
                {
                    loader:'url-loader',
                    options:{
                        name:'files/[name].[ext]'
                    }
                }
            ]
        }
    ]
}

当这样设置之后我们就能成功的引入静态资源了， 但是同时我也发现虽然能把静态引入项目，但是vue会把静态资源给转成base64 然后再进行展示，有时也会出现报错的问题，那么该怎么解决这个问题呢？其实这个也相当简单，我们只需要在vue.config.js里面配置几行代码就可以了

use:[
    {
        options:{
            limit:1
        }
    }
]

limit表示在静态资源超过多大时进行转码， 最小是1kb 如果设置为0的是不起作用的

完整的代码如下

module.exports = {
    configureWebpack:{
        module:{
            rules:[
                {
                    test:/\.pdf$/,
                    use:[
                        {
                            loader:'url-loader',
                            options:{
                                limit:1,
                                name:'files/[name].[ext]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}