VUE项目打包，问题及解决

在基本的java web工程中，WebContent目录存放了前端显示所需资源。所以VUE项目打包之后的内容也是放置在此处。

作为开发者，使用npm run dev来运行VUE项目，如果是用于打包，则使用npm run build来生成目标资源。
VUE项目中的config/index.js中包含了dev和build对应的参数。
npm run build将会在VUE根目录下生成dist目录，里面包含了index.html和static文件夹。

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

按照之前理解，将生成的dist文件夹放置到WebContent目录下，在java web工程构建之后就应该可以通过“原url/dist/”进行访问了。但是，我们在访问时会发现网页内容为空，如何解决呢？请检查下面三个问题。

1. 路径依赖问题
   我们放置的index.html和static文件夹在同一级目录下面，并且都没有放在java web工程的根目录下，所以需要修改build参数，即VUE项目中的config/index.js文件，将assetsPubicPath修改为相对路径。
   
2. 路由配置问题
   我在开发的时候，嫌弃VUE项目访问路径中的#号，所以在router配置中，设置成了history模式，但是，如果设置为history模式，则需要后端（即java web工程）进行一定的配合，可参考：https://router.vuejs.org/guide/essentials/history-mode.html，简单来说，就是在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是咱们app的依赖页面。
   如果不想修改java web工程，则只能使用默认的hash模式。
   其配置位于src/router/index.js：

const router = new VueRouter({
  mode: 'history',  //将该行删除
  routes: [...]
})

3. 解决图片等静态资源无法显示
   这里可能存在两种情况：一种是静态资源CSS中使用图片作为背景图片使用，第二种是在JS中生成图片标签后，再设置图片路径。
   这是因为图片的路径问题，这就导致了无法找到图片正确的路径。
   需要更改build/utils.js文件中的ExtractTextPlugin的配置项：