3

我在 Vue2 的项目中使用 element-ui，但我们想将我们的项目升级到 Vue3。为此，我们需要传递 Element-plus（element-ui 与 Vue3 不兼容）。

我们成功传递了 Vue3，但是当我们想要使用 element comp 时，我们总是遇到相同的问题。控制台中出现错误，我不明白为什么。我怀疑使用 vue-loader 将我的 SFC 文件转换为渲染器函数存在问题。

我的测试页面：

<template>
  <div id="app">
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="Pick a day"
    />
  </div>
</template>

<script>
const default_layout = "default";

export default {
    name: "App",
    components: {
    },
    data() {
        return {
            value1: null
        };
    },

vue.config.js：

module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
        config.resolve.alias.set("vue", "@vue/compat");
        config.module
            .rule("vue")
            .use("vue-loader")
            .tap(options => {
                return {
                    ...options,
                    compilerOptions: {
                        compatConfig: {
                            MODE: 2
                        }
                    }
                };
            });
    }
};

package.json 中的依赖项：

"dependencies": {
        "@ag-grid-enterprise/all-modules": "^25.3.0",
        "@vue/compat": "^3.1.0",
        "ag-grid-community": "^25.3.0",
        "ag-grid-enterprise": "^25.3.0",
        "ag-grid-vue": "^25.3.0",
        "core-js": "^3.6.5",
        "element-plus": "^1.1.0-beta.9",
        "highcharts": "^8.1.2",
        "highcharts-vue": "^1.3.5",
        "object-assign-deep": "^0.4.0",
        "rfdc": "^1.1.4",
        "rollup": "^2.28.2",
        "v-tooltip": "^2.1.3",
        "vue": "^3.1.0",
        "vue-class-component": "^7.2.3",
        "vue-click-outside": "^1.1.0",
        "vue-debounce": "^2.5.7",
        "vue-i18n": "^9.1.7",
        "vue-loader": "^16.0.0",
        "vue-numeric": "^2.3.0",
        "vue-property-decorator": "^8.5.0",
        "vue-router": "^4.0.11",
        "vue-simple-svg": "^2.0.2",
        "vue-toastification": "^1.7.6"
    },
    "devDependencies": {
        "@babel/core": "^7.10.3",
        "@rollup/plugin-alias": "^3.1.2",
        "@rollup/plugin-buble": "^0.21.3",
        "@rollup/plugin-commonjs": "^17.1.0",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-replace": "^2.3.3",
        "@storybook/addon-actions": "^6.1.21",
        "@storybook/addon-docs": "^6.1.21",
        "@storybook/addon-essentials": "^6.1.21",
        "@storybook/addon-links": "^6.0.26",
        "@storybook/vue": "^6.1.21",
        "@vue/cli-plugin-babel": "~4.5.13",
        "@vue/cli-plugin-eslint": "~4.5.13",
        "@vue/cli-service": "~4.5.13",
        "@vue/compiler-sfc": "^3.2.10",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.1.0",
        "babel-preset-vue": "^2.0.2",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^7.0.0",
        "husky": "^4.3.0",
        "lint-staged": "^10.5.1",
        "node-sass": "^4.14.1",
        "postcss": "^8.2.8",
        "rollup-plugin-copy": "^3.4.0",
        "rollup-plugin-includepaths": "^0.2.4",
        "rollup-plugin-scss": "^2.6.1",
        "rollup-plugin-terser": "^7.0.2",
        "rollup-plugin-vue": "^5.1.9",
        "sass-loader": "^8.0.2",
        "style-loader": "^1.2.1"
    },

我在控制台中遇到的错误：

错误

有关信息，我成功地使其在 Vue 的新项目中工作。

4

0 回答 0