Before implementing webpack, my vue routing was functioning properly. However, I encountered several loader issues and decided to use webpack. After setting up webpack, the main page loads correctly, but all of my routes now result in a 404 error. I have already attempted various solutions that were commented out, but none worked. I suspect there may be a problem with my webpack configuration file, but I am unable to identify it. Any suggestions or assistance would be greatly appreciated. Thank you for your time.
App.vue
<template>
<div class="base-app">
<div class="mapbox" id="mapbox">
<router-view />
</div>
</div>
</template>
<script>
// import Login from './components/login.vue';
// import Tract from './components/tract.vue';
export default {
name: "App",
// components: {
// Login,
// Tract
// }
};
</script>
router.js
import { createWebHistory, createRouter } from "vue-router";
import Index from "./components/index.vue";
import Login from "./components/login.vue";
import Tract from "./components/tract.vue";
const routes = [
{
path: "/",
component: Index
},
{
path: "/login",
component: Login
},
{
path: "/tract/:id",
component: Tract
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
main.js
import { createApp } from 'vue';
import App from './App.vue';
// import login from './components/login.vue';
// import tract from './components/tract.vue';
import router from './router.js';
import "./assets/styles/normalize.css";
import "./assets/styles/app.css";
const app = createApp(App);
// app.component('login', login);
// app.component('tract', tract);
app.use(router);
app.mount('#app');
webpack.config.cjs
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
module.exports = {
entry: {
main: "./src/main.js",
},
output: {
filename: 'main.bundle.js',
path: path.resolve(__dirname, 'dist/')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.s?css$/,
use: [
"style-loader",
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
},
},
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [autoprefixer()],
}
},
},
"sass-loader",
],
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
}
],
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8].css",
chunkFilename: "[name].[contenthash:8].css",
}),
new htmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
favicon: "./public/favicon.ico",
}),
],
resolve: {
extensions: [ '.tsx', '.ts', '.js', '.vue' ],
alias: {
'vue': '@vue/runtime-dom'
}
},
devtool: 'source-map'
};
vue.config.cjs
module.exports = {
devServer: {
disableHostCheck: true,
devMiddleware: {
writeToDisk: false
}
}
}
package.json
{
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"startdev": "webpack-dev-server --mode development --config ./webpack.config.cjs",
"start": "NODE_ENV=production webpack --config ./webpack.config.cjs"
},
"dependencies": {
"@aws-amplify/ui-vue": "^3.1.20",
"aws-amplify": "^5.3.3",
"axios": "^0.22.0",
"bootstrap": "4.6.0",
"chart.js": "^4.4.0",
"core-js": "^3.34.0",
"jquery": "^3.6.0",
"mapbox-gl": "^2.6.0",
"popper.js": "^1.16.1",
"postcss-loader": "^7.3.3",
"vue": "^3.0.0",
"vue-chartjs": "^5.2.0",
"vue-router": "4"
},
"devDependencies": {
"@babel/core": "^7.23.5",
"@babel/preset-env": "^7.23.5",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^10.4.16",
"babel-loader": "^9.1.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.8.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.4",
"mini-css-extract-plugin": "^2.7.6",
"postcss": "^8.4.32",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"source-map-loader": "^4.0.1",
"style-loader": "^3.3.3",
"vue-loader": "^17.3.1",
"vue-template-compiler": "^2.7.15",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
}