VueRouter 不愿意替换 `router-view` 标签答案

【问题标题】：The VueRouter is not willing to substitute the `router-view` tagVueRouter 不愿意替换 `router-view` 标签
【发布时间】：2020-10-31 22:03:48
【问题描述】：

我正在尝试将 VueRouter 集成到我的小型应用程序中，但我最终将 router-view 标记替换为注释。

也许是因为HtmlWebpackPlugin。

对于大量列表感到抱歉，但我认为每个细节都很重要。

main.js：

import Vue from "vue";
import VueRouter from "vue-router";

import PumpView from "./PumpView.vue";

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        { path: "/", component: PumpView },
    ],
});

new Vue({
    router,
}).$mount("#app");

index.html:

<!doctype html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>
</body>

</html>

PumpView.vue：

<template>
    <div class="pump-view">
        <chart-mini-grid></chart-mini-grid>
    </div>
</template>

<style>
.pump-view {
    height: inherit;
}
</style>

<script>
import ChartMiniGrid from "./ChartMiniGrid.vue";

export default {
    components: {
        ChartMiniGrid,
    },
};
</script>

webpack.config.js：

const path = require("path");
const webpack = require("webpack");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = function () {
    return {
        target: "web",
        mode: "production",
        entry: {
            main: "./src/main.js",
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: "babel-loader"
                },
                {
                    test: /\.vue$/,
                    loader: "vue-loader"
                },
                {
                    test: /\.tsx?$/,
                    use: "ts-loader",
                    exclude: /node_modules/,
                },
                {
                    test: /\.css$/,
                    use: [
                        "vue-style-loader",
                        "css-loader"
                    ]
                },
            ]
        },
        resolve: {
            extensions: [".js", ".ts"]
        },
        optimization: {
            runtimeChunk: "single",
            splitChunks: {
                chunks: "all",
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name (module) {
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                            return `npm.${packageName.replace('@', '')}`;
                        },
                    },
                },
            },
        },
        plugins: [
            new CleanWebpackPlugin({
                cleanAfterEveryBuildPatterns: [
                    path.join(__dirname, "src/lightweight-charts/dist"),
                ],
            }),
            new webpack.DefinePlugin({
                PRODUCTION: true,
            }),
            new webpack.HashedModuleIdsPlugin(),
            new HtmlWebpackPlugin({
                title: "Geralt",
                filename: "index.html",
                template: "src/index.html",
                favicon: "src/assets/favicon.png",
            }),
            new VueLoaderPlugin(),
        ],
        output: {
            path: path.join(__dirname, "dist"),
            filename: "[contentHash].js",
            chunkFilename: "[name].[contentHash].js",
            publicPath: "/",
        },
    };
};

几个小时以来，我一直在尝试弄乱这些东西，包括删除 HtmlWebpackPlugin 并将 HTML 模板放入 Vue 对象构造函数中：

new Vue({
    router,
    template: `<html>...</html>`,
}).$mount("#app");

现在我不知道我还能尝试什么。

我怀疑我的 Webpack 配置中的某些内容与惯用的 VueRouter 配置冲突。

我的PumpView 组件没有损坏，因为如果我在路由器字段旁边添加渲染功能，一切都会像魅力一样工作：

new Vue({
    router,
    render: h => h(PumpView),
}).$mount("#app");

附：我没有使用 webpack-dev-server，而是使用生产配置进行构建，所以事实并非如此。

【问题讨论】：

标签： javascript vue.js webpack vue-router html-webpack-plugin

【解决方案1】：

首先，您需要 App.vue，即包含路由器视图的容器

<!-- App.vue -->
<template>
  <div>
    <router-view/>
  </div>
</template>

然后，在初始化 Vue 时使用它

import App from './App.vue'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

因为 router-view 是 Vue 组件，所以你不应该在外层 html 中使用它

【讨论】：

我可以使用主HtmlWebpackPlugin 中的App.vue 模板吗？为什么 VueRouter 手册不包含render: h => h(App)？
不，HtmlWebpackPlugin 是处理 html 的插件。 router-view 是 vue-component，就像你写的 PumpView Component。
vue-router是导出router-view component的路由器，render是vue选项，所以他们有自己的职责。除了render options，你还可以使用template options，这完全取决于你
您将app id 用于$mount 函数的位置在哪里？似乎渲染函数总是替换我的 <div id="app"></div> 元素，所以 router-view 消失了。如果我删除渲染功能，我将无处放置我的App 组件。
您可以将app id 放在$mount('#app') 中，这意味着<div id="app"></div> 将被render functions 替换。 html 中的<div id="app"></div> 只是vue render 的容器