今天使用了ElmentPlus的按需自动导入,发现在使用自动导入之后 Message消息提示 和 Message Box 消息弹出框 这两个组件的样式就消失了,后来找了很多文章才知道自动导入本身存在这个问题,官方文档上也没有给出解决的方法,这里提供一种解决的方法,就是把按需引入的自动引入和手动引入都用上,然后就可以解决了。
命令:
// 下载自动引入需要的插件
npm i -D unplugin-vue-components unplugin-auto-import
// 下载手动引入需要的插件
npm i unplugin-element-plus -D
配置文件
// vue.config.js
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
// const ElementPlus = require('unplugin-element-plus/webpack')
module.exports = {
//···
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
ElementPlus()
],
},
};
照着上面的命令和配置文件进行操作,然后重启项目就可以了,一定要记得重启项目!!!