Vue.js 项目在“npm build”期间出现 404 错误并在 Apache Tomcat 中提供服务

Posted 2023-02-16

【中文标题】Vue.js 项目在“npm build”期间出现 404 错误并在 Apache Tomcat 中提供服务

【英文标题】：404 error in Vue.js project during 'npm build' and serve in Apache Tomcat

【发布时间】：2020-12-21 23:55:55

【问题描述】：

我在 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 serve 后，我可以在 url http://127.0.0.1:8080/test/test 处测试项目。

但是，当我使用 npm run build 构建项目并将 dist 文件夹移动到 Apache Tomcat 时，我收到 url http://127.0.0.1:8080/vue/test/test 的 404 错误（vue 是放置 dist 内容的文件夹）。

我检查了浏览器控制台并看到以下错误。

GET 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
        
      ])

更新：我也按照这个答案中描述的步骤在路由器中设置了一个基本路径，但它仍然不起作用。 https://***.com/a/60635441/6352160 如何调试此错误？为什么相同的代码会在 npm run build 和部署上失败，但在 npm run serve 上工作？

【参考方案1】：

手动创建一个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

【讨论】：

vue.config.js 中 'publicPath:' 的值应该是多少？我添加了 web.xml 并尝试了 '' 和 '\'，但它仍然给出相同的 404 错误。

@ShankarPS @ShankarPS 在你的情况下，publicPath 的值应该是vue，确保index.html 直接在vue 文件夹中，而不是在它的任何子目录中，也检查tomcat配置文件server.xml，它位于path_to_tomcat/conf/，为简单起见，不要更改它，保持最初安装时的状态。

不错。您应该考虑为router.vuejs.org/guide/essentials/… 打开一个 PR 以添加 Tomcat 的示例