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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。