Solution: Check the Developer Tools and the page, and image link is [object module] url-loader default content derived following the ES module syntax, while vue-loader to import resources default to commonJS way import options to modify url-loader, increasing esModule: false
favicon.ico404 error:
Method 1: Configure and modify HtmlWebpackPlugin directly in HtmlWebpackPlugin
new HtmlWebpackPlugin({
title: 'Webpack Vue',
favicon: path.resolve(__dirname, 'public/favicon.ico'),
template: path.resolve(__dirname, 'public/index.html')
})
Method 2: copy-webpack-plugin
cnpm install -D copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
path.resolve(__dirname, 'public/favicon.ico')
])
After the modification, the running project is normal, and there is no error message prompt.