CODEWITHSUNDEEP
javascriptnpmvuejs2vue-router
Shankar
Shankar

Reputation: 2825

404 error in Vue.js project during 'npm build' and serve in Apache Tomcat

I created a Vue.js project with following configuration in package.json

"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"
  },

I can test the project at the url http://127.0.0.1:8080/test/test after running npm run serve.

However, when I built the project with npm run build and moved the dist folder to Apache Tomcat, I get a 404 error for the url http://127.0.0.1:8080/vue/test/test (vue is the folder where the dist contents are placed).

I checked the browser console and see the following error.

GET http://localhost:8080/vue/test/test [HTTP/1.1 404 5ms]

Here is the router configuration.

export default new Router({
mode : 'history',
base: '/vue/',
routes : [
        {
            path : '/:param1/:param2',                
            name : 'comp1',
            component : comp1,
            props : true
        }
      ]})

Update: I also followed the steps described in this answer to set a base path in the Router, but it still doesnt work. https://stackoverflow.com/a/60635441/6352160 How can I debug this error? Why would the same code fail on npm run build and deploy, but work on npm run serve?

Upvotes: 1

Views: 2440

Answers (1)

Qiu Zhou
Qiu Zhou

Reputation: 1275

Manually create a web.xml file to the folder webapp/vue/WEB-INF/ (also create WEB-INF ) with following content:

web.xml:

 <?xml version="1.0" encoding="UTF-8"?>
 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                  http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1" metadata-complete="true">
  <display-name>Router for Tomcat</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

restart tomcat

Upvotes: 2

Related Questions