当使用香草spa时，我有一个错误路由器.js:66GEThttp://localhost:3000/views/Cate

Question

我有一个关于vanillaJS的项目，我使用Webpack。我用spa更改html容器内容。我用这篇文章写spahttps://medium.com/better-programming/js-vanilla-script-spa-1b29b43ea475。但我有一个错误路由器。js:66GEThttp://localhost:3000/views/Category.html404(未找到(。我的代码出了什么问题？我的头保持静态，只有主容器的内容发生了变化。我的项目结构：

-src
-routing
-route.js
-router.js
-views
-Category.html
-Page2.html
-app.js
-index.html
-style.css

代码：route.js:

'use stict';
let Route = function (name, htmlName, defaultRoute) {
try {
if(!name || !htmlName) {
throw 'error: name and htmlName params are mandatories';
}
this.constructor(name, htmlName, defaultRoute);
} catch (e) {
console.error(e);
}
}
Route.prototype = {
name: undefined,
htmlName: undefined,
default: undefined,
constructor: function (name, htmlName, defaultRoute) {
this.name = name;
this.htmlName = htmlName;
this.default = defaultRoute;
},
isActiveRoute: function (hashedPath) {
return hashedPath.replace('#', '') === this.name; 
}
}
export default Route;

router.js:

'use strict';
let Router = function (routes) {
try {
if (!routes) {
throw 'error: routes param is mandatory';
}
this.constructor(routes);
this.init();
} catch (e) {
console.error(e);   
}
}
Router.prototype = {
routes: undefined,
rootElem: undefined,
constructor: function (routes) {
this.routes = routes;
this.rootElem = document.getElementById('main');
},
init: function () {
var r = this.routes;
(function(scope, r) { 
window.addEventListener('hashchange', function (e) {
scope.hasChanged(scope, r);
});
})(this, r);
this.hasChanged(this, r);
},
hasChanged: function(scope, r){
if (window.location.hash.length > 0) {
for (var i = 0, length = r.length; i < length; i++) {
var route = r[i];
if(route.isActiveRoute(window.location.hash.substr(1))) {
scope.goToRoute(route.htmlName);
}
}
} else {
for (var i = 0, length = r.length; i < length; i++) {
var route = r[i];
if(route.default) {
scope.goToRoute(route.htmlName);
}
}
}
},
goToRoute: function (htmlName) {
(function(scope) { 
var url = 'views/' + htmlName,
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
scope.rootElem.innerHTML = this.responseText;
}
};
xhttp.open('GET', url, true);
xhttp.send();
})(this);
}
};
export default Router;

app.js:

import Route from './routing/route.js';
import Router from './routing/router.js';
(function () {
function init() {
var router = new Router([
new Route('Category', 'Category.html', true),
new Route('ActionSetA', 'ActionSetA.html'),
new Route('ActionSetB', 'ActionSetB.html'),
new Route('AnimalSetA', 'AnimalSetA.html'),
new Route('AnimalSetB', 'AnimalSetB.html'),
new Route('Clothes', 'Clothes.html'),
new Route('Emotions', 'Emotions.html'),
]);
}
init();
}());

这是我的网络包：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
mode: 'development',
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: false },
},
],
},
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
],
},
{
test: /.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images',
name: '[name].[ext]',
},
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug : true,
mozjpeg: {
progressive: true,
quality: 75
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
optimizationLevel: 1
},
webp: {
quality: 75
}
}
}
],
},
{
test: /.(woff|woff2|ttf|otf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts',
},
},
],
},
],
},
plugins: [
new  HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new CopyWebpackPlugin([
{from: './src/images', to: './images'},
]),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
},
};

Answer 1

您的路径似乎错误http://localhost:3000/views/Category.html相对于您的服务器。

可能是服务器运行的根路径配置错误。

除此之外，很难猜出确切的错误。查看服务器的相对路径，检查您的服务器/webpack配置。

更新：发布你的webpack更新，你能检查一下你的"dist"；文件夹具有用于视图的正确文件夹/路径，因为我认为您的webpack正在将您的文件绑定并部署到"；dist"；文件夹