在和自动导入插件同时使用时的问题优化

[nineszsoo]

当我在项目中同时使用到了 unplugin-auto-import 自动导入相关 API 时, 打包的时候会因为 vite-plugin-externals 先进行外部库的处理转换，而导致 unplugin-auto-import 自动导入的 API 失效。

下面是我查看的使用自动导入 ref 时插件的执行顺序。

然后我在 node_modules 下面修改了 vite-plugin-externals 的 index.js 中关于该插件的返回对象（添加了属性enforce: 'post'）后就可以正常使用了。

希望老哥看下有没有更好的处理方法优化一下。

[Clareyang213]

我按这种方式修改之后，打包后，unplugin-auto-import 自动导入还是有问题，还有没有其他解决方案

[Clareyang213]

解决了，vite打包的时候，自动导入应该使用'unplugin-auto-import/rollup'

`import AutoImportVite from 'unplugin-auto-import/vite';
import AutoImportRollup from 'unplugin-auto-import/rollup';

// cdn链接
const cdn = {
vue: 'Vue',
// 👇 配置 vue-demi 全局变量 👇
'vue-demi': 'VueDemi',
pinia: 'Pinia',
'vue-router': 'VueRouter'
}；
export default defineConfig(({ command }) => {
return {
plugins: [
vue(),
viteExternalsPlugin(cdn.externals),
command !== 'build' &&
AutoImportVite({
// 后续vue/vue-router/pinia的API都不需要再单独import到setup里面了
imports: ['vue', 'vue-router', 'pinia']
})
],
build: {
rollupOptions: {
plugins: [AutoImportRollup({ imports: ['vue', 'vue-router', 'pinia'] })]
}
}
}；
});`

[cq-cute]

解决了，vite打包的时候，自动导入应该使用'unplugin-auto-import/rollup'

`import AutoImportVite from 'unplugin-auto-import/vite'; import AutoImportRollup from 'unplugin-auto-import/rollup';

// cdn链接 const cdn = { vue: 'Vue', // 👇 配置 vue-demi 全局变量 👇 'vue-demi': 'VueDemi', pinia: 'Pinia', 'vue-router': 'VueRouter' }； export default defineConfig(({ command }) => { return { plugins: [ vue(), viteExternalsPlugin(cdn.externals), command !== 'build' && AutoImportVite({ // 后续vue/vue-router/pinia的API都不需要再单独import到setup里面了 imports: ['vue', 'vue-router', 'pinia'] }) ], build: { rollupOptions: { plugins: [AutoImportRollup({ imports: ['vue', 'vue-router', 'pinia'] })] } } }； });`

这样配置之后打包的时候还是没有自动引入，你用的哪个版本啊