✨Q&A：常见问题答疑-第二弹

[wenmine]

问题一： 本地执行pnpm dev启动，页面一直loading，进不去

答：
使用开发者工具看一下控制台是否产生报错，若报错如下：
GET https://npm.onmicrosoft.cn/@opentiny/vue-theme-3.11/index.css net::ERR ABORTED 403 (URLGolbalBlocked)

Access to script at "https://npm.onmicrosoft.cn/vue@3/dist/vue.runtime.esm-browser.js' from origin "http://127.0.0.1:888/ 127.0.0.1/:1g’ has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://npm.onmicrosoft.cn/vue@3/dist/vue.runtime.esm-browser.js net: :ERR_FAILED

解决方案

当前使用的cdn地址为："npm.onmicrosoft.cn"，这个地址用户的电脑可能访问不了，导致无法拿到我们依赖的组件库等内容，可尝试将npm.onmicrosoft.cn替换为unpkg.com，替换文件和位置如下：

packages/design-core/.env.development

image

packages/design-core/.env.prod

image

packages/blockToWebComponentTemplate/vite.config.js

image

在tiny-engine项目中，找到以上文件，把对应的字符串npm.onmicrosoft.cn替换为unpkg.com，替换后保存重新启动项目

问题二：本地启动没有问题，打包好之后部署到环境上，报错如下（或类似）：

解决方案

当前使用的cdn地址为："npm.onmicrosoft.cn"，这个地址用户的电脑可能访问不了，导致无法拿到我们依赖的组件库等内容，可尝试将npm.onmicrosoft.cn替换为unpkg.com，替换文件和位置如下：

packages/design-core/.env.development

image

packages/design-core/.env.prod

image

packages/blockToWebComponentTemplate/vite.config.js

image

在tiny-engine项目中，找到以上文件，把对应的字符串npm.onmicrosoft.cn替换为unpkg.com，替换后保存重新打包部署。

问题三：本地执行打包命令后，生成的产物在哪个文件夹？

答： tiny-engine/packages/design-core/dist/

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: ✨Q&A: Frequently Asked Questions-Part 2

[wenmine]

问题四：本地使用mockServer时，可以正常出码，但是使用本地连接服务端时，点击出码按钮会报错：不支持的浏览器。
#405

A：当前下载文件的api限制只能用https与本地的安全协议（localhost），若需要支持http请求，则需自行开发在不支持https的场景下，下载为zip压缩包的功能

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Question 4: When using mockServer locally, the code can be output normally. However, when using the local connection server, clicking the code output button will report an error: Unsupported browser.

[wenmine]

本地启动时报错：PageSetting.vue:69 Uncaught ReferenceError: ref is not defined

解决方案：更新develop最新代码，报错原因是：由于当前我们并没有锁定间接依赖的版本，所以在我们重新执行npm install时，代码里用的babel里一套间接依赖最近发了新包，这个新包与老的plugin-vue-jsx不兼容，相当于你的node_modules里拥有了新的babel，但是用的是老的vuejsx。所以需要升级vue-jsx。

具体解决的pr在 #347

[wenmine]

问题：保存源码到本地，为什么会变成下载zip
答
因为保存源码到本地，使用了 Window: showDirectoryPicker()和Window: showOpenFilePicker() 这两个API，当前API浏览器兼容性不足，只支持以下浏览器，并且也不允许使用在http协议中，以及内嵌在iframe中。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Question: When saving the source code locally, why does it become a download zip
answer
Because the source code is saved locally, the two APIs Window: showDirectoryPicker() and Window: showOpenFilePicker() are used , the current API browser compatibility is insufficient, only supports the following browsers, and is not allowed to be used in the http protocol or embedded in iframes.

[wenmine]

问题：如何在TinyEngine绑定ref
答
使用状态管理和变量绑定，将当前ref绑定到state变量中，具体绑定方式请查看手册使用状态管理和变量绑定

问题：物料组件配置好，会带上小尾巴，如何去掉

答
新版本特性：
如果配置了是容器类型，而且子节点为空，那么会默认插入placeholder 辅助拖拽内容拖入。
如果不需要往里面拖入内容，或者非容器类型，需要配置：
{
configure: {
// 配置为 false就不会在 children为空的时候插入 placehokder了
isContainer: false
}
}

问题：服务器部署之后需要使用https访问吗？
答
需要，具体配置可以看

问题： 请求canvas时，想直接请求canvas.html，不需要路径转换，如何处理？
答
将本文件里的/canvas?tenant=${tenant}改成canvas.html

问题：对于官方提供的element-plus表格组件，右侧属性column绑定变量没有在画布中呈现

答：记做遗留问题，待解决

布局里绝对定位相关问题，可检查一下此pr #751

问题：页面启动时报错：

答：3.14下的tinyvue应该要搭配 vue3.4.23

[wenmine]

问题：自定义物料时，预览里无法加载物料内容
8ba449796c0416cc361105db23cf5310_

答
需要按照这样的流程执行一次，后看效果

1. pnpm splitMaterials
2. 修改，新增物料
3. pnpm buildMaterials

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Problem: When customizing materials, the material content cannot be loaded in the preview
8ba449796c0416cc361105db23cf5310_

answer
You need to follow this process once and see the effect later.

1. pnpm splitMaterials
2. Modify and add new materials
3. pnpm buildMaterials

[wenmine]

问题：创建区块时，提示不是合法的blockName格式

答
blockName需要遵循两个大写开头英文单词，如：BlockName

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Problem: When creating a block, the prompt is not a legal blockName format

answer
blockName needs to follow two English words starting with capitals, such as: BlockName