Vue如何指定不編譯的文件夾和favicon.ico
指定不編譯的文件夾和favicon.ico
在Vue3.0中引入public文件夾,不希望被編譯的文件都可以放到這個(gè)文件夾下,但是在vue2.0中實(shí)現(xiàn)類似的功能,需要自己在webpack.prod.conf.js中做一些配置
這里簡(jiǎn)單區(qū)分一下Vue2.0中的assets和static區(qū)別
assets
:各組件中的依賴項(xiàng),會(huì)被編譯static
:不會(huì)被編譯,原樣放到dist文件夾下
言歸正傳,假設(shè)不希望被編譯的文件全部放在public下,要修改的地方是webpack.prod.conf.js
// copy custom static assets new CopyWebpackPlugin([ ? ? //---static文件夾下的文件也不會(huì)被編譯 ? ? { ? ? ? ? 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: ['.*'] ? ? } ])
指定項(xiàng)目的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ā)布到線上,會(huì)導(dǎo)致ico圖標(biāo)不顯示的問題,是因?yàn)閳?zhí)行npm run build打包后只有static文件夾和index.html文件,找不到根目錄下的ico圖標(biāo),解決辦法:把ico圖標(biāo)放到static文件夾下就OK啦。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個(gè)v-model實(shí)現(xiàn)這個(gè)數(shù)據(jù)的綁定,但是在有些輸入框中,還需要一些其他的指令搭配這個(gè)v-model指令結(jié)合使用,這篇文章主要介紹了vue的表單數(shù)據(jù)收集,基本指令和自定義指令,需要的朋友可以參考下2023-01-01詳解在vue-cli項(xiàng)目中安裝node-sass
本篇文章主要介紹了詳解在vue-cli項(xiàng)目中安裝node-sass ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法(最新推薦)
vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法,只需要在router-link中加入target="_blank"即可在新的頁(yè)面打開標(biāo)簽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能示例代碼
這篇文章主要介紹了vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01vue前端測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05