vue打包到Linux的tomcat上

一：修改参数

1.config/index.js：dev和build模块下的assetsPublicPath改为'./'。dev模块下的host和port分别修改为Linux的IP和需要的端口。

2.build/utils.js：

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',//修改这个参数
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

3.router/index.js：在这个文件里引入项目需要路由跳转的所有页面，注意，引入的时候需要使用

import HelloWorld from '@/components/HelloWorld'

如果使用的是'./xxx/xxx.vue'，会导致访问页面显示404。

下面的路由使用常用的方式就可以。

 routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }]

4.对文件进行打包。如果是使用vue init webpack spa 生成的项目，直接使用npm run build打包即可。打包之后原项目目录下会出现dist文件夹，里面的内容既是我们需要的包。

5.部署。在linux服务器事先下载好tomcat，在ROOT文件夹下放入刚才dist文件夹中的static文件夹和index.html。此时，最重要的一步来了，如果进行到这一步就启动tomcat，那么极有可能访问首页没问题，但路由跳转的时候报404，所以我们要设置如下解决方案

如果 URL 匹配不到任何静态资源，则应该返回同一个 app 依赖的index.html 页面。

在ROOT根目录下创建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>

这样就保证了路由跳转不会404

此时调用startup.sh启动tomcat，就可以正常访问辣。