如何不使用localhost在HTML文件中运行Stencil JS构建产物

Stencil 默认构建产物依赖 HTTP 服务器的路径解析、ES 模块加载逻辑，在 file 协议下会因为跨域限制、路径解析规则差异无法直接运行，按以下步骤修改配置即可实现直接打开 HTML 文件运行：

步骤1：修改 Stencil 构建配置 #

编辑项目根目录下的 stencil.config.ts，调整输出配置和路径规则：

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

export const config: Config = {
  namespace: 'your-component-namespace', // 替换为你的组件命名空间
  outputTargets: [
    // 输出单文件自定义元素包，无需额外依赖加载
    {
      type: 'dist-custom-elements-bundle',
      dir: 'dist/custom-elements'
    },
    // 如果你用默认的www输出模式，修改以下配置
    {
      type: 'www',
      baseUrl: './',
      buildDir: 'build',
      serviceWorker: null // 禁用Service Worker，file协议下无法注册
    }
  ],
  // 所有资源路径使用相对路径前缀
  resourceUrlPrefix: './',
  extras: {
    // 启用动态导入垫片，解决file协议下ES模块动态导入报错
    dynamicImportShim: true,
    scriptDataOpts: false
  }
};

步骤2：构建后调整HTML引入逻辑 #

执行 npm run build 完成构建后，按以下方式编写HTML文件，直接引入构建产物即可：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Stencil本地测试</title>
  <!-- 替换为你构建生成的单文件脚本路径 -->
  <script src="./dist/custom-elements/your-component-namespace.js"></script>
</head>
<body>
  <!-- 直接使用Stencil开发的组件 -->
  <your-custom-component></your-custom-component>
</body>
</html>

注意事项 #

• 组件内所有静态资源（图片、样式、配置文件等）必须使用相对路径引用，禁止使用/开头的绝对路径
• 不要在组件内调用跨域接口、或者动态加载非本地的资源，file协议下会触发跨域拦截
• 如果仅用于本地临时测试，无需修改配置，可以给Chrome添加启动参数--allow-file-access-from-files，跳过file协议的安全限制即可直接打开默认构建的产物

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