uniapp分包图片使用方法

原始uniapp不能将分包页面的静态资源编译到dist下对应的目录，有两种方法可以解决这个问题：

1. 启动分包优化;
2. 使用copy-webpack-plugin;

一、分包优化

关于使用分包优化，可查看官方文档如下： 以及uni-app 分包目录说明 由上可知，在manifest.json文件的配置下添加"optimization":{"subPackages":true}开启分包优化。

1、目录结构

2、manifest.json配置

3、分包内图片引用

<image src="/分包名称/static/images/bg-black.png"></image>
<image src="/pageQuote/static/images/bg-black.png"></image>

二、使用copy-webpack-plugin

1、目录结构

2、vue.config.js配置

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, '/')
        }
      ])
    ]
  }
}

3、分包内图片引用

<image src="/分包名称/static/images/bg-black.png"></image>
<image src="/pageQuote/static/images/bg-black.png"></image>

如果分包目录不是/src/分包名称，而是/src/pages/分包名称，可参考此文章配置。

修改vue.config.js配置

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

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

、分包内图片引用

<image src="/pages/分包名称/static/images/bg-black.png"></image>
<image src="/pages/pageQuote/static/images/bg-black.png"></image>