项目场景:
在使用element-plus搭建项目时,使用按需导入功能中的自动导入
问题描述
自动导入中主要是安装两款插件,插入到vite或者webpack的配置中,见文档
如果直接放外面那么会报错:
ERROR Invalid options in vue.config.js: “plugins” is not allowed
module.exports = defineConfig({
transpileDependencies: true,
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
});
解决方案:
这里的plugins放置的位置需要放到configureWebpack中:
const { defineConfig } = require("@vue/cli-service");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
}
});