Problem description:

  • The vUE project can be displayed properly in the local environment, but cannot be displayed properly after packaging. The real cause of the problem is that our icon file is not packaged into our dist file. This is due to webPack-related configuration. Here is my personal solution.

The solution

You need to write the address in the webpack.prod.config.js file

new HtmlWebpackPlugin({
            title: 'Project name here',
            favicon: './MyTemplate/td_icon.ico'// This address can be a directory on the server where the folder and dist package files are located. // This address must have a favicon, which is used to declare the logo filename:'.. /index.html',
            template: '!!!!! ejs-loader! ./src/template/index.ejs',
            inject: true
        })
Copy the code

An example is shown below:

  • You also need to configure this in the index. HTML file on the project’s entry home page:
</title> <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0, the 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 Specifies that the icon displayed to the left of the address bar in your browser must carry the declaration browser label --> <! Only the first line is required because the "shortcut Icon" string will be recognized by most standards-compliant browsers as listing possible keywords (" shortcut "will be ignored, Only "icon") whereas Internet Explorer will treat it as a separate name (" shortcut icon "). The result is that all browsers can understand this code. -- > <! -- <link rel="icon" href="./dist/td_icon.ico" type="favicon"/> This method may be good for preparing conditions --> <! -- <link rel="icon" href="./td_icon.ico" type="favicon"/> Initial version --> <! -- <link rel="icon" href="./src/images/small.jpg" type="image/x-icon"/> </head>Copy the code

After completing the above configuration, the packaged production environment can be displayed normally