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

Question

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?

Qiu Zhou · Accepted Answer · 2020-09-03 02:08:48Z

2

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

answered Sep 3, 2020 at 2:08

Qiu Zhou

1,2758 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shankar Over a year ago

what should be the value for 'publicPath:' in vue.config.js? I added web.xml and I tried '' and '\', but it still gives same 404 error.

Qiu Zhou Over a year ago

@ShankarPS @ShankarPS In your case, the value for publicPath should be vue, make sure the index.html is directly in vue folder, not in it's any sub directory, also check tomcat configuration file server.xml which is at path_to_tomcat/conf/, for simplicity, don't change it, leave it as it was when initially installed.

Phil Over a year ago

Nice. You should consider opening a PR for router.vuejs.org/guide/essentials/… to add an example for Tomcat

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related