关于Pinia无依赖生产版及Vue Devtools ES模块的技术问询

场景与现有实现 #

在CMS单页开发场景中，直接以ES模块方式配合使用Pinia 2.1.7和Vue 3.3.8，具体实现如下：

脚本引入方式 #

<script type="module" src="./js/lib/vue-3.3.8.esm-browser.js"></script>
<script type="module" src="./js/lib/pinia-2.1.7.esm-browser.js"></script>

模块导入代码 #

import {defineComponent, createApp, nextTick} from "./lib/vue-3.3.8.esm-browser.js";
import {createPinia, setActivePinia} from "./lib/pinia-2.1.7.esm-browser.js"

应用初始化代码 #

// ...
const pinia = createPinia();
setActivePinia(pinia);

const cntApp = createApp(App);
cntApp.use(pinia);
cntApp.mount('.vue-app');
// ...

当前流程已可正常运行，但发现Pinia ES模块依赖vue-demi和vue/devtools-api，已引入vue-demi的ES模块，但找不到devtools-api的ES模块。希望保持ES模块单页引入、不构建大型JS包的前提下，解决以下两个问题：

1. 是否存在不含vue-demi和devtools-api的Pinia生产版本？
2. 能否以ES模块或脚本形式引入devtools-api？

问题解答 #

1. 无额外依赖的Pinia生产版本 #

Pinia官方提供的Vue 3专属生产环境ES模块包（pinia.esm-browser.prod.js）满足需求：

• 该版本仅适配Vue 3，移除了用于兼容Vue 2的vue-demi依赖；
• 同时剔除了所有devtools相关代码，不需要依赖vue/devtools-api。
  你可以从Pinia的npm包中提取dist/pinia.esm-browser.prod.js文件，直接放到项目中作为ES模块引入即可。

2. devtools-api的ES模块引入方案 #

如果需要Vue DevTools调试支持，vue/devtools-api可以单独以ES模块形式引入：

• 从npm包@vue/devtools-api中提取dist/devtools-api.esm-browser.js文件，放入项目目录后，通过模块导入使用：

import * as devtoolsApi from './lib/devtools-api.esm-browser.js';

• 若不需要调试功能，完全可以忽略这个依赖——Pinia的生产版本不会执行devtools相关逻辑，缺失该依赖也不会影响核心功能运行。

内容的提问来源于stack exchange，提问作者peter_the_oak