组件未使用 Vue 兼容渲染

Question

组件未使用 Vue 兼容渲染

jro*_*roy 3 webpack vue.js vuejs2 vuejs3

我正在尝试使用迁移构建将我的 Vue 应用程序从 Vue 2 切换到 Vue 3，以便逐步执行此操作。我已经遵循了第 1 点到第 3 点，但是当启动我的应用程序时，我的根组件似乎未正确呈现。

这是初始化应用程序的文件：

import Vue, {configureCompat} from "vue";

configureCompat({
    "MODE": 2
});

new Vue({
    "template": "<h1>Hello world!</h1>",
    mounted() {
        console.log("Mounted");
    }
}).$mount("#app");

Run Code Online (Sandbox Code Playgroud)

以及输出 HTML：

<body>
    <div id="app" data-v-app>
        <!---->
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

奇怪的是，我可以Mounted在控制台中看到日志，如果我进行更改，import Vue from "vue";它就import Vue from "@vue/compat"可以工作，但据我了解，这应该是不需要的，因为我在 Webpack 配置中配置了一个别名来vue指向@vue/compat：

process.env.BABEL_ENV = "renderer";

const path = require("path");
const {VueLoaderPlugin} = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const {dependencies} = require("./package.json");

// List of Node modules to include in webpack bundle.
// Required for specific packages like Vue UI libraries that provide pure `.vue` files that need compiling.
const WHITE_LISTED_MODULES = [
    "vue"
];

const rendererConfig = {
    "target": "electron-renderer",
    "mode": (process.env.NODE_ENV === "production") ? "production" : "development",
    "entry": {
        "renderer": path.join(__dirname, "./src/renderer/index.js")
    },
    "output": {
        "globalObject": "this",
        "filename": "[name].js",
        "libraryTarget": "commonjs2",
        "path": path.join(__dirname, "./dist")
    },
    "externals": [
        ...Object.keys(dependencies || {}).filter((d) => !WHITE_LISTED_MODULES.includes(d))
    ],
    "resolve": {
        "alias": {
            "@": path.join(__dirname, "./src/renderer"),
            "vue": "@vue/compat"
        },
        "extensions": [".js", ".vue"]
    },
    "node": {
        "__dirname": process.env.NODE_ENV !== "production",
        "__filename": process.env.NODE_ENV !== "production"
    },
    "module": {
        "rules": [
            {
                "test": /\.vue$/,
                "use": {
                    "loader": "vue-loader",
                    "options": {
                        "compilerOptions": {
                            "compatConfig": {
                                "MODE": 2
                            }
                        }
                    }
                }
            }
        ]
    },
    "plugins": [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            "filename": "index.html",
            "template": path.resolve(__dirname, "./src/renderer/index.ejs"),
            "nodeModules": (process.env.NODE_ENV === "production") ? false : path.resolve(__dirname, "./node_modules"),
        })
    ]
}

module.exports = rendererConfig;

Run Code Online (Sandbox Code Playgroud)

我错过了什么吗？任何帮助将不胜感激！

Answer 1

jro*_*roy 13

解决方法是更改resolve.alias：

"vue": "@vue/compat"

Run Code Online (Sandbox Code Playgroud)

经过：

"vue": "@vue/compat/dist/vue.esm-bundler.js"

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，4 月前
查看次数：	4313 次
最近记录：	2 年，2 月前