项目打包部署到Tomcat

╰+攻爆jí腚メ 2021-08-28 14:00 608阅读 0赞

## 一、 ##

使用 npm run build打包完成之后会出现一个dist文件夹，里面有static文件夹和一个index.html文件，一般我们部署在tomcat上面会将文件放在webapps文件夹下

如果不进行任何修改将dist文件夹放进去的话，会出现资源路径错误的问题，因为config文件夹下index文件build默认的 assetsPublicPath:"/"，除非部署的时候将dist文件里的文件放在webapps下，这样就很不科学，那我们如何解决这个问题呢

1.  修改config文件夹下index文件中的build里的assetsPublicPath:"./"
2.  修改router文件夹下index.js添加 base: ‘/文件夹名称/’    （例如：vue，可以自己随意设置）
3.  在tomcat下webapps里面新建一个文件夹，名称是之前配置时设置的名称（vue）
4.  npm run build打包后将dist文件夹下的文件放在"vue"文件夹下

访问地址为 [http://xxxxxxxxx/vue/][http_xxxxxxxxx_vue]

## 二、 ##

如果出现css等文件404的问题，细心观察你会发现是资源路径错误，那要如何解决呢？

修改build下的utils.js文件

// Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
       return ExtractTextPlugin.extract({
          use: loaders,
          publicPath: '../../',             //添加该行（解释：pubicpath为打包后app.css至index.html的相对路径）
          fallback: 'vue-style-loader'
       })
     } else {
        return ['vue-style-loader'].concat(loaders)
     }

## 三、 ##

如果你的项目路由使用的模式是history模式，那么你一定会遇到上线后页面刷新出现404的问题

查阅文档后发现如果使用history模式需要后端人员给予支持，直接在tomcat下webapps下你的项目文件夹中新建一个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>

[http_xxxxxxxxx_vue]: http://xxxxxxxxx/vue/