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

Question

我正在尝试将 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");

P.S。我没有使用 webpack-dev-server，而是使用生产配置构建，所以情况并非如此。

Answer 1

首先，你需要App.vue，包含router-view

的容器

<!-- 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

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

The VueRouter is not willing to substitute the `router-view` tag

javascript

webpack

vue.js

html-webpack-plugin

vue-router