亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2022年04月15日 11:07:03   作者:Markov Zheng  
這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

指定不編譯的文件夾和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ù)收集案例之基本指令和自定義指令詳解

    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 EventBus自定義組件事件傳遞

    Vue EventBus自定義組件事件傳遞

    這篇文章主要介紹了Vue EventBus自定義組件事件傳遞,組件化應(yīng)用構(gòu)建是Vue的特點(diǎn)之一,本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • 詳解在vue-cli項(xiàng)目中安裝node-sass

    詳解在vue-cli項(xiàng)目中安裝node-sass

    本篇文章主要介紹了詳解在vue-cli項(xiàng)目中安裝node-sass ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • vue全局?jǐn)?shù)據(jù)管理示例詳解

    vue全局?jǐn)?shù)據(jù)管理示例詳解

    這篇文章主要為大家介紹了vue全局?jǐn)?shù)據(jù)管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vue-cli 構(gòu)建骨架屏的方法示例

    vue-cli 構(gòu)建骨架屏的方法示例

    這篇文章主要介紹了vue-cli 構(gòu)建骨架屏的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11
  • Vue實(shí)現(xiàn)登錄以及登出詳解

    Vue實(shí)現(xiàn)登錄以及登出詳解

    本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2021-09-09
  • vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法(最新推薦)

    vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法(最新推薦)

    vue router點(diǎn)擊打開新的標(biāo)簽頁(yè)的方法,只需要在router-link中加入target="_blank"即可在新的頁(yè)面打開標(biāo)簽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2023-10-10
  • vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能示例代碼

    vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能示例代碼

    這篇文章主要介紹了vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • vue router路由嵌套不顯示問題的解決方法

    vue router路由嵌套不顯示問題的解決方法

    這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題
    2017-06-06
  • vue前端測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化

    vue前端測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化

    這篇文章主要為大家介紹了vue測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-05-05

最新評(píng)論