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,不生效,

[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 = `

<script setup> import { ref } from 'vue' const msg = ref('Hello World!') </script>

{{ msg }}

`.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 文件，其他文件传输的 口子