Vue如何指定不編譯的文件夾和favicon.ico

更新時間：2022年04月15日 11:07:03 作者：Markov Zheng

這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

指定不編譯的文件夾和favicon.ico

在Vue3.0中引入public文件夾，不希望被編譯的文件都可以放到這個文件夾下，但是在vue2.0中實現(xiàn)類似的功能，需要自己在webpack.prod.conf.js中做一些配置

這里簡單區(qū)分一下Vue2.0中的assets和static區(qū)別

assets:各組件中的依賴項，會被編譯
static:不會被編譯，原樣放到dist文件夾下

言歸正傳，假設(shè)不希望被編譯的文件全部放在public下，要修改的地方是webpack.prod.conf.js

// copy custom static assets
new CopyWebpackPlugin([
? ? //---static文件夾下的文件也不會被編譯
? ? {
? ? ? ? from: path.resolve(__dirname, '../static'),
? ? ? ? to: config.build.assetsSubDirectory,
? ? ? ? ignore: ['.*']
? ? },
? ? {
? ? ? ? from: path.resolve(__dirname, '../public'),
? ? ? ? to: path.resolve(__dirname, '../dist'),
? ? ? ? ignore: ['.*']
? ? },
? ? //---這里還能指定特定文件輸出的位置和文件名
? ? {
? ? ? ? from: path.resolve(__dirname, '../public/strings-en.js'),
? ? ? ? to: path.resolve(config.build.assetsRoot, 'strings.js'),
? ? ? ? ignore: ['.*']
? ? }
])

指定項目的favicon.ico

同樣是修改webpack.prod.conf.js

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不能正確顯示問題

首先將favicon.ico圖片放在根目錄下，通過以下兩種方法使其顯示正確。

方法一：修改index.html文件

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" />

方法二：修改webpack配置文件

1、找到build下的webpack.dev.conf.js文件

new HtmlWebpackPlugin({
? ? ? filename: 'index.html',
? ? ? template: 'index.html',
? ? ? inject: true,
? ? ? favicon: path.resolve('favicon.ico') // 增加
? ? }),

2、找到build下的webpack.prod.conf.js文件

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

修改配置文件后重啟npm run dev，大功告成。

注意：如果打包發(fā)布到線上，會導(dǎo)致ico圖標(biāo)不顯示的問題，是因為執(zhí)行npm run build打包后只有static文件夾和index.html文件，找不到根目錄下的ico圖標(biāo)，解決辦法：把ico圖標(biāo)放到static文件夾下就OK啦。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: