我试图将我的Vue应用程序从Vue 2切换到Vue 3,使用migration build来逐步完成这一点。我已经遵循了第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;
我是不是漏了什么?任何帮助将不胜感激!
1条答案
按热度按时间7cjasjjr1#
修复是在
resolve.alias
中更改:签署人: