uni app中關於圖片的分包加載

因為在項目中使用了大量的靜態資源圖片，使得主包體積過大， 而把這些圖片全部放到服務器又有點麻煩，就想能不能把圖片也分包，但是直接放在分包下的話導致圖片資源找不到了，

在社區中看到大佬分享的十分有用，特此記錄下來，原文章鏈接：https://ask.dcloud.net.cn/question/68773

首先在根目錄新建文件vue.config.js

 

 vue.config.js中：

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, '/static'),
          to: path.join(__dirname+'/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
        }
      ])
    ]
  }
}

 然后在根目錄命令行執行命令:

npm install copy-webpack-plugin --save-dev

分包內引用圖片：

 到這分包引用圖片就成功啦~

我們也可以看到編譯后是這樣的：