vue 打包部署到服务器上

以前就遇到这样的问题，但利用一些基本的百度，谷歌也能解决了问题，但是这次又遇到了，又出问题了...，记录一下

vue部署到Tomcat

后端同学用的tomcat，直接懒的麻烦，就打包给放到tomcat的webapps目录下

- webapps
  - dist
     - index.html
     - static

这样直接就xxx/dist来进行访问.......

部署过程，参考：为什么vue+webpack需要用到node，如何部署项目到服务器？

总结一下：以刚刚我部署的为例

单页面应用最重要的文件app.js，在wepack打包后在index.html中的引用是这样的：

<script type="text/javascript" src="/static/js/app.js"></script>

但我们放到服务器上后，访问xxx/dist时，实际上app.js的路径是xxx/static/js/app.js，也就是说此时index.html应该要变成如下才对：

<!-- 放到服务器后 -->
<script type="text/javascript" src="/dist/static/js/app.js"></script>

但我们不可能每次都手动去改吧，于是只要在webpack的config/index.js的build下修改成：

assetsPublicPath: './'
或者
assetsPublicPath: '/dist/'  （你放tomcat webapps下的目录名）

这样就成功一半了，但是记得我们还使用了vue-router啊，部署到线上会采用history模式（【源码拾遗】从vue-router看前端路由的两种实现），此时路由也要变成相对于/dist/（你放tomcat webapps下的目录名）来发请求啊

mode: 'history',
base: 'dist',

于是就完美了！

但有一个问题：history模式，当用户直接输入url（输错），例如xxx/dist/ddd，这时是找不到路由的，在Tomcat里面404页面该怎么跳回首页呢？

新建一个WEB-INF目录，在WEB-INF目录下新建一个web.xml：

- static
- index.html
- WEB-INF
  - web.xml

web.xml中如下，配置一下当404时，跳转回首页

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/index.html</location>
</error-page>  
</web-app>

此时注意还需在router中配置一下，当404时，匹配到的路由：

{
    path: '*',
    name: 'errorPage',
    component: require('xxx').default  // 你的首页组件
},

参考资源：
Vue-router History模式下，空白页面，如何配置tomcat服务器
vue路由中的mode : 'history',
HTML5 History 模式，个人觉得官方文档解释的并没有太清楚.....

vue部署到Nginx

待续...

vue部署到node

待续...