Я пытаюсь интегрировать 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 конфликтует с конфигурацией idiomati c VueRouter.
Мой PumpView компонент не сломан, поскольку все работает как шарм, если я добавляю функцию рендеринга рядом с полем маршрутизатора:
new Vue({
router,
render: h => h(PumpView),
}).$mount("#app");
PS Я не использую webpack-dev-server, а собираю с производственной конфигурацией, s o это не так.