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

這篇文章主要介紹“Vue怎么指定不編譯的文件夾和favicon.ico”，在日常操作中，相信很多人在Vue怎么指定不編譯的文件夾和favicon.ico問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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ā)布到線上，會導致ico圖標不顯示的問題，是因為執(zhí)行npm run build打包后只有static文件夾和index.html文件，找不到根目錄下的ico圖標，解決辦法：把ico圖標放到static文件夾下就OK啦。

到此，關(guān)于“Vue怎么指定不編譯的文件夾和favicon.ico”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>