vue项目解决浏览器Tag标签图标不展现问题

时间 2019-11-16

原文原文链接

问题描述：

vue项目本地环境可正常显示，打包以后不能正常显示。问题真正的缘由是由于咱们的图标文件没有打包到咱们的dist文件中，这是因为webpack相关配置引发的，如下是我我的的解决方案。

解决方案

须要在webpack.prod.config.js文件内编写地址css

new HtmlWebpackPlugin({
            title: '此处为项目名称',
            favicon: './MyTemplate/td_icon.ico',//此地址能够是服务器上的文夹和dist包文件同级目录下
            // 此处必须带有favicon,用于声明徽标
            filename: '../index.html',
            template: '!!ejs-loader!./src/template/index.ejs',
            inject: true
        })
复制代码

示例如图：html

另外须要在项目的入口主页的index.html文件中进行配置：

<head>
    <title>此处为项目名称</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="/dist/main.css">
    <link rel="stylesheet" name="theme" href="">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" rel="external nofollow" />
    <link rel="shortcut icon" href="./MyTemplate/td_icon.ico" type="favicon" rel="external nofollow" />
    <!-- <link rel="shortcut icon" href="favicon.ico" /> shortcut icon 特指浏览器中地址栏左侧显示的图标 必须带上声明浏览器标签-->
    <!-- 只有第一行是必须的，由于“shortcut icon”字符串将被多数遵照标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）
    而Internet Explorer将会把它做为一个单独的名称（“shortcut icon”）。 
    这样作的结果是全部浏览器均可以理解此代码。  -->
    <!-- <link rel="icon" href="./dist/td_icon.ico" type="favicon" /> 此方法可能好使 预备条件-->
    <!-- <link rel="icon" href="./td_icon.ico" type="favicon" /> 初始版本-->
    <!-- <link rel="icon" href="./src/images/small.jpg" type="image/x-icon" /> 原版-->
</head>
复制代码

完成以上的配置以后便可实现打包后的生产环境正常显示vue