Vue项目打包部署到Tomcat

废话不多说，直接进入正题

一.通常在开发环境下请求后台接口会用到反向代理，而在生产环境中反向代理是不生效的，那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作，更改配置文件去自动切换接口地址。

1. 开发环境：在config文件夹下的dev.env.js中 添加这样一行代码

   'use strict'
   const merge = require('webpack-merge')
   const prodEnv = require('./prod.env')
   
   module.exports = merge(prodEnv, {
     NODE_ENV: '"development"',
     API_ROOT: '"/api"'			//添加该行代码
   })
   

   添加的代码表示开发环境下使用的是配置反向代理后的地址，也就是使用"/api"表示就可以

2. 生产环境：在config文件夹下的prod.env.js中添加这样一行代码

   'use strict'
   module.exports = {
   	NODE_ENV: '"production"',
   	API_ROOT: '"http://xx.xxx.xx.xx:8888"' 	// 生产环境地址     
   }
   

   添加的代码表示生产环境下使用的就是后台接口的地址

3. 在需要请求后台接口的地方添加

   const root = process.env.API_ROOT		//请求时使用root+接口拼接
   

（另外还有其他的方法解决，可以封装axios统一处理一些问题，详情Axios请求与响应拦截，异常处理）

二.使用 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/

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

1. 修改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,
         pubicpath:'../../',             //添加该行（解释：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文件，文件内容为

  Router for Tomcat
  
    404
    /index.html