How does Vue specify uncompiled folders and favicon.ico

This article mainly introduces "Vue how to specify uncompiled folders and favicon.ico". In daily operation, I believe many people have doubts about how Vue specifies uncompiled folders and favicon.ico. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "Vue how to specify uncompiled folders and favicon.ico". Next, please follow the editor to study!

Specify folders and favicon.ico that are not compiled

Introduce the public folder into Vue3.0. You don't want to put all the compiled files under this folder, but to achieve similar functions in vue2.0, you need to do some configuration in webpack.prod.conf.js.

Here's a brief distinction between assets and static in Vue2.0

Assets: dependencies in each component, which will be compiled

Static: will not be compiled, put it in the dist folder as it is

Back to the point, assuming that you don't want to put all the compiled files under public, what you want to modify is webpack.prod.conf.js.

/ / copy custom static assetsnew CopyWebpackPlugin (files under the [/ /-static folder will not be compiled either {from: path.resolve (_ _ dirname,'. / static'), to: config.build.assetsSubDirectory, ignore: [. *']}, {from: path.resolve (_ _ dirname,'. / public'), to: path.resolve (_ dirname) '.. / dist'), ignore: ['. *']}, / /-you can also specify the location and file name of a specific file output {from: path.resolve (_ _ dirname,'.. / public/strings-en.js'), to: path.resolve (config.build.assetsRoot, 'strings.js') Ignore: ['. *']}]) specify the favicon.ico of the project

Also modify webpack.prod.conf.js

The path to new HtmlWebpackPlugin ({filename: config.build.index, template: 'index.html', favicon:' favicon.ico', / /-favicon inject: true, minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true / / more options: / / https://github.com/kangax/html-minifier#options-quick-reference} / / necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency'}), favicon.ico does not display the problem correctly

First place the favicon.ico picture in the root directory and make it display correctly in the following two ways.

Method 1: modify index.html file method 2: modify webpack configuration file

1. Find the webpack.dev.conf.js file under build

New HtmlWebpackPlugin ({filename: 'index.html', template:' index.html', inject: true, favicon: path.resolve ('favicon.ico') / / add})

2. Find the webpack.prod.conf.js file under build

New HtmlWebpackPlugin ({filename: config.build.index, template: 'index.html', inject: true, favicon: path.resolve (' favicon.ico'), / / add minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true...})

Restart npm run dev after modifying the configuration file, and you are done.

Note: if the package is released online, it will lead to the problem that the ico icon does not display, because after performing npm run build packaging, there are only static folders and index.html files, and you can't find the ico icon in the root directory. The solution: put the ico icon under the static folder and OK.

At this point, the study on "how Vue specifies uncompiled folders and favicon.ico" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!