element plus使用问题

PBitW

已于 2025-02-07 17:21:04 修改

阅读量1.8k

点赞数 20

分类专栏： vue3 文章标签： elementplus使用问题 element plus报错 element plus警告 element plus引入 elementui elementplus

于 2024-01-27 22:22:26 首次发布

本文链接：https://blog.youkuaiyun.com/langwang_100/article/details/135889448

版权

文章介绍了在使用ElementPlusforVue时遇到的常见问题，如配置webpack以按需引入、解决编译错误（如模块未找到、样式问题）、处理版本过高的问题、警告提示以及国际化设置。作者提供了详细的配置示例和错误排查建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

菜鸟使用了 element plus 创建了两个项目，结果一个没一点问题，一个老是有警告，也不知道为什么，就算版本搞成一样的也不行，只能退而求其次，不警告算了，也希望可以帮助使用 element plus 读者！！！

element plus

使用 element plus 自然要使用其最强大的按需引入，全部引入实在是太浪费了！

首先我们按照官网的步骤：

npm install -D unplugin-vue-components unplugin-auto-import

vue.config.js

安装完事之后，就要按照官网里面的来配置vite或者webpack就行，感觉很简单（但是不熟悉打包工具的，可能还是不会，所以列一下）

webpack版

const {
    defineConfig } = require("@vue/cli-service");

// 按需引入element plus
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const {
    ElementPlusResolver } = require("unplugin-vue-components/resolvers");

const port = 8888;

module.exports = defineConfig({
   
  publicPath:
    process.env.NODE_ENV === "production"
      ? "./" // 生产环境 --> 一般./就行，但是如果服务器有路径要改为：/pathname/
      : "/", // 开发环境
  transpileDependencies: true,// 将第三方包进行兼容转译，但是vite没有（因为大部分第三方包都自己转译好了，可以删除）
  productionSourceMap: false, // 指定在生产环境下是否生成源代码映射文件
  
  // 按需引入element plus
  configureWebpack: {
   
    resolve: {
   
      alias: {
   
        // 设置路径别名
        components: "@/components",
      },
    },
    plugins: [
      AutoImport({
   
        resolvers: [ElementPlusResolver()],
      }),
      Components({
   
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  
  devServer: {
   
    port, // 端口
    proxy: {
   
      "/Api": {
   
        target: "http://xxxxx", // API服务器的地址
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
   
          "^/Api": "",
        },
        // headers 是用来设置请求头的字段，referer 字段用于指定请求的来源地址，即告诉后端服务器这个请求的来源是什么(其实可以不要，像下面一个一样)
        headers: {
   
          referer: "http://xxxx", // 转发接口
        },