VUE----vue-cli3.0设置页面icon图标
最近做的一个项目中在用vue-cli3.0创建项目的时候不小心选择了pwa这一个插件,碰到了不能设置网页图标的问题。在最新的vue-cli3.0直接在index.html中设置icon是不行的,需要在vue.config.js中设置一个pwa属性。重要!!!将public下的应文件夹下的icon下的图标都删除掉。vue.config.jsmodule.exports = {...
·
背景:使用vue-cli3.0搭建一个项目。打算给网页加一个图标。如下图,我像之前在vue-cli2一样添加link标签。但却不生效。
我发现,
在最新的vue-cli3.0直接在index.html中设置icon是不行的,需要在vue.config.js中设置一个pwa属性。
首先,在public添加您想添加的图标,需要将public下的文件夹下的其他无用icon下的图标都删除掉。
在index.html中,
<link rel ="shortcut icon" type="image/x-icon" href="./icon.png">
在vue.config.js添加一个pwa,将想要添加的图标路径填进去。如下
module.exports = {
baseUrl: './',
assetsDir: 'static',
productionSourceMap: false,
pwa: {
iconPaths: {
favicon32: './icon.png',
favicon16: './icon.png',
appleTouchIcon: './icon.png',
maskIcon: './icon.png',
msTileImage: './icon.png'
}
}
// devServer: {
// proxy: {
// '/api':{
// target:'http://jsonplaceholder.typicode.com',
// changeOrigin:true,
// pathRewrite:{
// '/api':''
// }
// }
// }
// }
}
更多推荐
已为社区贡献5条内容
所有评论(0)