问题描述：
- vue项目本地环境可正常显示，打包之后不能正常显示。问题真正的原因是因为我们的图标文件没有打包到我们的dist文件中，这是由于webpack相关配置引起的，以下是我个人的解决方案。
解决方案
需要在webpack.prod.config.js文件内编写地址
new HtmlWebpackPlugin({
title: '此处为项目名称',
favicon: './MyTemplate/td_icon.ico',//此地址可以是服务器上的文夹和dist包文件同级目录下
// 此处必须带有favicon,用于声明徽标
filename: '../index.html',
template: '!!ejs-loader!./src/template/index.ejs',
inject: true
})
示例如图：
- 另外需要在项目的入口主页的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>
完成以上的配置之后即可实现打包后的生产环境正常显示
