Vue应用中index.html与manifest.json的图标路径匹配问题

方案1：让Webpack处理manifest.json（推荐） #

默认放在public目录的文件不会被Webpack解析，路径自然不会被替换。把manifest.json移到src目录下，通过配置让Webpack处理它并输出到dist根目录：

1. 新建或修改vue.config.js，添加以下配置：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: 'src/manifest.json',
          to: 'manifest.json',
          transform(content) {
            // 获取Webpack处理后带哈希的图标路径
            const iconPath = require('./src/assets/telepathic.svg').default;
            // 替换manifest里的原始路径
            return content.toString().replace('"src": "src/assets/telepathic.svg"', `"src": "${iconPath}"`);
          }
        }
      ]
    })
  ]
};

2. 修改src/manifest.json里的图标路径为原始资源路径：

{
  "icons": [
    {
      "src": "src/assets/telepathic.svg",
      "sizes": "48x48 72x72 96x96 128x128 256x256 512x512",
      "type": "image/svg+xml",
      "purpose": "any"
    }
  ]
}

3. 安装依赖：

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

构建时Webpack会自动把manifest中的原始路径替换成dist目录里带哈希的真实路径。

方案2：构建后脚本替换路径 #

不想改Webpack配置的话，可以写个Node脚本在构建完成后自动替换路径：

1. 项目根目录新建postbuild.js：

const fs = require('fs');
const path = require('path');

// 找到dist/assets下带哈希的telepathic.svg文件
const distAssetsDir = path.join(__dirname, 'dist/assets');
const iconFile = fs.readdirSync(distAssetsDir).find(file => file.startsWith('telepathic') && file.endsWith('.svg'));
if (!iconFile) {
  console.error('未找到构建后的图标文件');
  process.exit(1);
}

const iconPath = `/assets/${iconFile}`;

// 修改manifest.json里的路径
const manifestPath = path.join(__dirname, 'dist/manifest.json');
let manifestContent = fs.readFileSync(manifestPath, 'utf8');
manifestContent = manifestContent.replace('"src": "/telepathic.svg"', `"src": "${iconPath}"`);
fs.writeFileSync(manifestPath, manifestContent);

console.log('manifest图标路径替换完成');

2. 修改package.json的构建脚本，让构建后自动执行脚本：

{
  "scripts": {
    "build": "vue-cli-service build && node postbuild.js"
  }
}

3. 保持manifest.json在public目录，路径暂时写/telepathic.svg即可。

方案3：复制图标到public（简单但冗余） #

可以接受少量文件冗余的话，直接在vue.config.js里配置把图标复制到public目录，这样manifest里的/telepathic.svg就能正常访问：

module.exports = {
  chainWebpack: config => {
    config.plugin('copy').tap(args => {
      args[0].patterns.push({
        from: 'src/assets/telepathic.svg',
        to: 'telepathic.svg'
      });
      return args;
    });
  }
};

这个方法最省事，但构建后dist里会同时存在带哈希和不带哈希的两个图标文件。

内容的提问来源于stack exchange，提问作者vudvudvud12