vite-plugin-package-config

安装vite-plugin-package-config 引入后运行报PkgConfig不是函数,在vite.config.ts中引用

该回答引用ChatGPT

如有疑问,可以回复我!

根据你提供的信息,我可以理解为你在使用 Vue.js 和 Vite.js 开发前端应用程序时,尝试安装并使用 vite-plugin-package-config 插件,但在引入该插件后出现了一个错误提示,说 PkgConfig 不是一个函数。

这个错误可能是由于你的代码中使用了不正确的语法或者配置不正确导致的。下面是一些可能的解决方法:

确认你已经正确地安装了 vite-plugin-package-config,可以通过在命令行中运行 npm ls vite-plugin-package-config 或者 yarn list vite-plugin-package-config 来检查。

确认你正确地引入了该插件,例如:


// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { vitePackageConfig } from 'vite-plugin-package-config';

createApp(App).use(vitePackageConfig()).mount('#app');

确认你的代码中没有其他语法或者配置错误。你可以尝试在不使用该插件的情况下运行你的代码,看看是否能够正常工作。如果不能,请检查你的代码。

  • 这篇博客: vite常用配置中的 vite-plugin-imp 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 一个自动导入组件库样式的vite插件。

    • 安装
    npm i vite-plugin-imp -D
    
    • vite.config.js 文件配置
    import vitePluginImp from 'vite-plugin-imp'
    
    plugins: [
        vue(), 
        vitePluginImp({
            libList: [
                {
                    libName: 'vant',
                    style(name) {
                        if (/CompWithoutStyleFile/i.test(name)) {
                            // This will not import any style file 
                            return false
                        }
                        return `vant/es/${name}/style/index.js`
                    }
                },
                {
                  libName: 'element-plus',
                  style: (name) => {
                    return`element-plus/lib/theme-chalk/${name}.css`
                  }
                }
            ]
        })
    ],
    
    • 使用
    <template>
        <div class="indexWrap">
            <Progress percentage="15"></Progress>
            <Button type="warning">vant button</Button>
        </div>
    </template>
    
    <script>
        import { Progress, Button } from 'vant'
    
        export default {
            components: {
                Button,
                Progress
            },
        }
    </script>