Vue如何指定不編譯的資料夾和favicon.ico

2022-04-15 13:00:53

指定不編譯的資料夾和favicon.ico

在Vue3.0中引入public資料夾，不希望被編譯的檔案都可以放到這個資料夾下，但是在vue2.0中實現類似的功能，需要自己在webpack.prod.conf.js中做一些設定

這裡簡單區分一下Vue2.0中的assets和static區別

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

言歸正傳，假設不希望被編譯的檔案全部放在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，大功告成。

注意：如果打包釋出到線上，會導致ico圖示不顯示的問題，是因為執行npm run build打包後只有static資料夾和index.html檔案，找不到根目錄下的ico圖示，解決辦法：把ico圖示放到static資料夾下就OK啦。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。