tango icon indicating copy to clipboard operation
tango copied to clipboard

本地运行代码不成功

Open qdu123 opened this issue 1 year ago • 2 comments

一、我分别克隆了下面代码到本地:

  • https://github.com/NetEase/tango
  • https://github.com/NetEase/codesandbox-client.git

二、先使用node 16的环境,在codesandbox-client根目录,执行:

yarn install
yarn build:deps
yarn build:sandpack

然后进入www目录执行:python -m http.server启动了8000端口的本地沙箱,访问地址:http://10.20.62.16:8000

三、切换至node 18环境,在tango目录下

  • 修改apps\playground\.umirc.ts,注释了下面代码以避免https访问
  // https: {
  //   key: path.resolve(__dirname, 'local.netease.com-key.pem'),
  //   cert: path.resolve(__dirname, 'local.netease.com.pem'),
  //   http2: false,
  // },
  • 修改apps\playground\package.json文件
"dev": "cross-env PORT=8001 umi dev",
  • 修改apps\playground\src\pages\index.tsx
<Sandbox
              onMessage={(e) => {
                if (e.type === 'done') {
                  const sandboxWindow: any = sandboxQuery.window;
                  if (sandboxWindow.localTangoComponentPrototypes) {
                    workspace.setComponentPrototypes(sandboxWindow.localTangoComponentPrototypes);
                  }
                }
              }}
              bundlerURL="http://10.20.62.16:8000"
              navigatorExtra={<Button size="small">hello world</Button>}
            />
  • 在tango根目录,执行yarn && yarn start

四、出现问题: 浏览器访问http://10.20.62.16:8001/,能够显示下面界面,选中中间区域的内容,不会有操作菜单及右边的属性面板出现 4 不过f12可以看到存在下面错误(下面的错误在demo页面同样存在): 1 2 3

各位大佬,是否有过本地成功运行的经历,还请不吝赐教,拜谢!

qdu123 avatar Jul 09 '24 07:07 qdu123

修改apps\playground.umirc.ts,注释了下面代码以避免https访问

设计器与沙箱必须运行在 HTTPS 环境下,这是 Chrome 的安全策略限制,具体参见 沙箱接入常见问题

ccloli avatar Jul 18 '24 14:07 ccloli

如果想本地调试,增加本地组件好像有点不太方便,建议怎么调试呢

GeeFib avatar Jul 26 '24 10:07 GeeFib