vue项目设置浏览器icon图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题:
·
1. 引入图标
在vue项目中的index.html中引入图标,为防止项目打包时图片路径出错,需把icon图标放在static静态文件夹下
<link rel="shortcut icon" href="./static/logo.ico" type="image/x-icon" />
2.新增(修改)代码块
①.build文件夹下的webpack.dev.conf.js文件修改如下:
源码如下:
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve('./static/logo.ico')
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
②.build文件夹下的webpack.prod.conf.js文件修改如下:
源码如下:
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('./static/logo.ico'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
3.最后重启项目即可
更多推荐
已为社区贡献7条内容
所有评论(0)