组件未使用 Vue compat 渲染

Posted

技术标签:

【中文标题】组件未使用 Vue compat 渲染【英文标题】：Component not rendered with Vue compat 【发布时间】：2021-09-11 17:05:09 【问题描述】：

我正在尝试使用migration build 将我的 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");

以及输出 html：

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

奇怪的是我可以在控制台中看到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;

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

【问题讨论】：

我也尝试删除 @ 别名，但它并没有改变任何东西。 vue 别名似乎有点工作，因为 configureCompat 已正确定义，而如果我删除 vue 别名，则它是未定义的。 【参考方案1】：

解决方法是更改​​resolve.alias：

"vue": "@vue/compat"

作者：

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

【讨论】：

以上是关于组件未使用 Vue compat 渲染的主要内容，如果未能解决你的问题，请参考以下文章

构建 Vue 项目时出现错误“无法安装组件：未定义模板或渲染函数”

Laravel 6 + Vue.js 无法挂载组件：未定义模板或渲染函数

[Vue 警告]：无法挂载组件：未定义模板或渲染函数

vue 2.0 无法挂载组件：未定义模板或渲染函数

Vue 计算属性已更新，但组件未重新渲染

[Vue 警告]：无法挂载组件：Vue CLI 4 中未定义模板或渲染函数