ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.12k stars 14.64k forks source link

[Bug Report] webpack下vue2.7.x, el-table渲染空白 #21984

Open MinatoHikari opened 2 years ago

MinatoHikari commented 2 years ago

Element UI version

2.15.9

OS/Browsers version

macOS 12.4

Vue version

2.7.4

Reproduction Link

https://github.com/MinatoHikari/vue2.7-bug

Steps to reproduce

git clone 复现链接项目,安装依赖 npm run dev 并打开默认页面

将vue-template-complier改成2.6.14 npm run dev 并打开默认页面

What is Expected?

vue-template-complier 2.7.4 下el-table正常渲染

What is actually happening?

vue-template-complier 2.6.14 下el-table正常渲染 vue-template-complier 2.7.4 下el-table渲染空白

MinatoHikari commented 2 years ago

已解决 写给遇到一样问题的人: 在 webpack 配置中设置 vue 的 runtime-compiler

resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
    },
zhangzippo commented 2 years ago

我也有这个问题但是加上这个没有解决

已解决 写给遇到一样问题的人: 在 webpack 配置中设置 vue 的 runtime-compiler

resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
    },
MinatoHikari commented 2 years ago

我也有这个问题但是加上这个没有解决

已解决 写给遇到一样问题的人: 在 webpack 配置中设置 vue 的 runtime-compiler

resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
    },

vite还是webpack

efureev commented 2 years ago

I have the same trouble...

MinatoHikari commented 2 years ago

I have the same trouble...

try the config above I post.

efureev commented 2 years ago

Thx for you answer. I've just downgraded Vue and vue-template-compiler to 2.4.16. And, as result, it works! )

MoLinJie commented 2 years ago

你好,请问vite下怎么配置

MinatoHikari commented 2 years ago

你好,请问vite下怎么配置

https://github.com/ElemeFE/element/issues/21968

imba97 commented 2 years ago

《尤雨溪懂个锤子vue》


vite 也是,安装其他包的时候自动更新了 2.7.10,找了两天问题

OKFred commented 2 years ago

或许就不需要 vue-template-compiler了 引文:https://blog.vuejs.org/posts/vue-2-7-naruto.html#upgrade-guide

You can also remove vue-template-compiler from the dependencies - it is no longer needed in 2.7.

MinatoHikari commented 2 years ago

或许就不需要 vue-template-compiler了 引文:https://blog.vuejs.org/posts/vue-2-7-naruto.html#upgrade-guide

You can also remove vue-template-compiler from the dependencies - it is no longer needed in 2.7.

一般有其他库会要用,删了会有问题

fantasy525 commented 2 years ago

已解决 写给遇到一样问题的人: 在 webpack 配置中设置 vue 的 runtime-compiler

resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
    },

这个问题的原因是 自己的业务代码用的是 "module": "dist/vue.runtime.esm.js",而 element-ui 用的是 "main": "dist/vue.runtime.common.js",因此页面加载了两个不同的vue,造成了问题,因此需要强行指定vue指向同一个vue

我用的rollup,因此我的配置是 alias({ entries: [{ find: /^vue/, replacement: 'vue/dist/vue.runtime.esm.js' }] }), webpack参考上面的配置 resolve,问题解决

zhuzaiye commented 1 year ago

webpack5+vue2 搭建tornado后端渲染的管理后台, el-table效果出不来, 显示空白.

"dependencies": {
    "element-ui": "^2.15.13",
    "vue": "^2.7.14",
  }
resolve: {
        modules: [__dirname, 'node_modules'],
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
        extensions: ['*', '.js', '.vue']
    },

参考该方式: 可以解决.

resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js',
        },
}

image

Ttou commented 1 year ago

vite

resolve: {
  alias: [
    {
      find: "vue",
      replacement: "vue/dist/vue.esm.js",
    },
  ],
}