如何在Vue 3中结合ES6 Import Map使用PrimeVue？

你的代码存在两个核心问题：一是缺少Vue的Import Map配置，浏览器无法识别createApp的加载来源；二是primevue/config的导入路径没有对应到正确资源，导致PrimeVue配置模块无法加载。

下面是完整的正确配置示例：

1. 完整的Import Map配置 #

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
    "primevue/": "https://unpkg.com/primevue@3/",
    "primeicons/": "https://unpkg.com/primeicons@6/"
  }
}
</script>

这里用带后缀/的命名空间配置，所有primevue/xxx格式的导入都会自动映射到对应资源路径，无需逐个单独配置。

2. 正确的初始化代码 #

<script type="module">
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
// 示例：导入并注册Button组件
import Button from 'primevue/button';

const app = createApp({
  template: `
    <Button label="点击测试" />
  `
});

app.use(PrimeVue);
app.component('Button', Button);
app.mount("#left-panel");
</script>

关键注意点： #

• 必须给script标签加上type="module"，否则浏览器不会按ES模块规则处理导入逻辑。
• 若需使用PrimeIcons图标库，导入样式时可直接写import 'primeicons/primeicons.css'，对应配置已包含在上面的Import Map中。

内容的提问来源于stack exchange，提问作者Donny V.