Vue SFC Playground 用不了啊

[xuxuxu-ni]

Vue SFC Playground 没有配置 importMap的地方啊

[dewfall123]

没有理解到你的意思?

1. https://sfc.vuejs.org/ 在左侧编辑栏右上角配置importMap

2. demo配置importMap示例:

   <demo src="./demo.vue"
   title="Demo 演示"
   desc="这是一个 Demo 渲染示例"
   importMap="{'vue-typical': 'https://cdn.jsdelivr.net/npm/vue-typical@2.1.0/dist/vue-typical.es.min.js'}">
   </demo>

[xuxuxu-ni]

demo配置importMap,不生效,<demo src="./demo.vue" title="Demo 演示" desc="这是一个 Demo 渲染示例" importMap="{'vue-typical': 'https://cdn.jsdelivr.net/npm/vue-typical@2.1.0/dist/vue-typical.es.min.js'}">

[Braveheartforyou]

demo配置importMap,不生效,

确实不管用

[Braveheartforyou]

是不是这种转换 不可用了？

[Braveheartforyou]

是不是这种转换 不可用了？

或者你是参考的什么项目！可以大家一起看一下

[Braveheartforyou]

我看了一下 @vue/repl 的源码 import { zlibSync, unzlibSync, strToU8, strFromU8 } from 'fflate'

export function utoa(data: string): string { const buffer = strToU8(data) const zipped = zlibSync(buffer, { level: 9 }) const binary = strFromU8(zipped, true) return btoa(binary) }

export function atou(base64: string): string { const binary = atob(base64)

// zlib header (x78), level 9 (xDA) if (binary.startsWith('\x78\xDA')) { const buffer = strToU8(binary, true) const unzipped = unzlibSync(buffer) return strFromU8(unzipped) }

// old unicode hacks for backward compatibility // https://base64.guru/developers/javascript/examples/unicode-strings return decodeURIComponent(escape(binary)) }

const welcomeCode = `

`.trim()

export class File { filename: string code: string hidden: boolean compiled = { js: '', css: '', ssr: '' }

constructor(filename: string, code = '', hidden = false) { this.filename = filename this.code = code this.hidden = hidden } }

const getFiles = (files) => { const exported: Record<string, string> = {} for (const filename in files) { exported[filename] = files[filename].code } return exported }

const files = { 'App.vue': new File('App.vue', welcomeCode), 'import-map.json': new File( 'import-map.json', JSON.stringify( { imports: { 'vue': 'https://sfc.vuejs.org/vue.runtime.esm-browser.js', "vue/server-renderer": "https://sfc.vuejs.org/server-renderer.esm-browser.js", "ant-design-vue": "https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.8/dist/antd.min.js", "sc-ui": "https://cdn.jsdelivr.net/npm/@sincerecloud/sc-ui@0.0.60/sc-ui.es.min.js" } }, null, 2 ) ) }

const urlHash = '#' + utoa(JSON.stringify(getFiles(files))) console.log('urlHash: ', urlHash);

这样生成的 就可以正常解析

[Braveheartforyou]

@dewfall123 你有时间更还到你 vitepress-demo-block 这个库里面？建议再开放一个 除了App.vue 文件，其他文件传输的 口子