After setting up a Vue.js project, the configuration in the package.json file looks like this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"http-proxy-middleware": "^1.0.5",
"vee-validate": "^3.3.7",
"vue": "^2.6.11",
"vue-router": "^3.4.0",
"vue-sanitize": "^0.2.0",
"vuex": "^3.5.1"
},
Running npm run serve allows me to test the project at the URL .
However, after building the project with npm run build and moving the dist folder to Apache Tomcat, I encounter a 404 error for the URL (where 'vue' is the folder where the dist contents are placed).
Upon checking the browser console, I see the following error:
GET http://localhost:8080/vue/test/test [HTTP/1.1 404 5ms]
The router configuration is as follows:
export default new Router({
mode : 'history',
base: '/vue/',
routes : [
{
path : '/:param1/:param2',
name : 'comp1',
component : comp1,
props : true
}
]})
Update: Despite following the steps in this answer to set a base path in the Router, the issue persists.
How can I troubleshoot this error? Why does the same code work with npm run serve but fails after deployment with npm run build?