Javascript 404'期间Vue.js项目中出现错误；npm构建&x27；并在ApacheTomcat中提供服务

我在package.json中创建了一个具有以下配置的Vue.js项目

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

运行

npm run service

后，我可以在url上测试项目

但是，当我使用

npm run build

构建项目并将dist文件夹移动到Apache Tomcat时，url出现404错误（vue是放置dist内容的文件夹）

我检查了浏览器控制台，发现以下错误

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

这是路由器的配置

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

更新：我也按照回答中描述的步骤在路由器中设置基本路径，但它仍然不起作用。

---

如何调试此错误？为什么相同的代码在

npm run build

和deploy上失败，而在

npm run serve

上工作？

手动创建一个

web.xml

文件到文件夹

webapp/vue/web-INF/

（也创建web-INF），并包含以下内容：

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>

Tomcat路由器
404
/index.html

---

重新启动tomcat

vue.config.js中“publicPath:”的值应该是多少？我添加了web.xml，并尝试了“”和“\”，但仍然给出了相同的404错误。@ShankarPS@ShankarPS在您的情况下，

publicPath

的值应该是

vue

，确保

index.html

直接位于

vue

文件夹中，而不是在它的任何子目录中，还要检查tomcat配置文件

server.xml

，它位于路径\u to \u tomcat/conf/，为简单起见，不要更改它，让它保持最初安装时的状态。很好。你应该考虑打开一个PR来为Tomcat增加一个例子。