Stencil项目国际化实现遇404错误，求解决方案

我在Stencil项目中尝试实现国际化功能时，遇到了404错误，无法找到对应的翻译文件。尽管严格按照两篇教程的步骤操作，问题依然存在。以下是我的项目配置文件，恳请提供解决建议：

package.json #

{
  "name": "iii",
  "version": "0.0.1",
  "description": "Stencil Component Starter",
  "main": "dist/index.cjs.js",
  "module": "dist/index.js",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/iii/iii.esm.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/ionic-team/stencil-component-starter.git"
  },
  "files": [
    "dist/",
    "loader/"
  ],
  "scripts": {
    "build": "stencil build --docs",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },
  "dependencies": {
    "@stencil/core": "^2.13.0"
  },
  "devDependencies": {
    "@types/jest": "^27.0.3",
    "jest": "^27.4.5",
    "jest-cli": "^27.4.5",
    "puppeteer": "^10.0.0"
  },
  "license": "MIT"
}

stencil.config.ts（注：原文件名标注为stencil.config.json，实际内容为TypeScript配置） #

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'iii',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  copy: [
    {
      src: "**/*.i18n.*.json",
      dest: "i18n"
    }
  ]
};

排查与解决建议 #

• 核对翻译文件的存放位置
  确保.i18n.*.json格式的翻译文件存放在项目src目录下或其内部子目录中，当前配置的copy规则会扫描所有目录，但优先保证文件在Stencil的源码扫描范围内。
• 验证copy配置的生效情况
  执行npm run build后，检查输出目录（比如www/i18n或dist/i18n）是否存在复制后的翻译文件。如果未找到，修改copy规则的src路径为src/**/*.i18n.*.json，限定只扫描源码目录下的文件。
• 确认文件加载路径正确性
  组件中请求翻译文件的路径需与copy配置的dest对应。例如配置dest: "i18n"时，请求路径应为/i18n/xxx.i18n.en.json，确保和实际生成的文件位置一致。
• 升级Stencil版本
  你使用的@stencil/core为2.13.0版本，部分旧版本的文件复制规则可能存在匹配缺陷，尝试升级至v2.x系列的最新稳定版后重新构建。
• 查看构建日志
  运行npm run build时，留意控制台输出的日志信息，确认是否有翻译文件被成功复制的记录，以此判断问题出在复制环节还是加载环节。

内容的提问来源于stack exchange，提问作者kuuhak-u