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

最新推荐文章于 2023-12-26 15:40:55 发布

原创最新推荐文章于 2023-12-26 15:40:55 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #webpack

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

vue-cli

3 篇文章

订阅专栏

在Vue项目中引入PDF等静态文件时，需要在vue.config.js中配置webpack的url-loader。默认情况下，小文件会被转换为Base64编码。为了避免这种转换，可以通过设置`limit`选项来指定文件大小阈值，当文件大小超过该阈值时，不会被转码。完整配置示例展示了如何在webpack中设定这一规则，从而正确引入并展示静态资源。

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]'
                            }
                        }
                    ]
                }
            ]
        }
    }
}