采用了Vue-cli的方式。

1、反向代理

  devServer: {

    host: '127.0.0.1',

    port: 9000,

    proxy: {

      '/gonghui/': {

        target: 'http://127.0.0.1',

         secure: false,

         changeOrigin: true,

         pathRewrite: {

           '^/gonghui': 'gonghui'

         }

      }

    },

    historyApiFallback: {

      index: url.parse(options.dev ? '/assets/' : publicPath).pathname

    }

  },

2、main.js

import Vue from 'vue'

import App from './App'

import router from './router'

/*

 * iview的全局引入

 */

import iView from 'iview';

import 'iview/dist/styles/iview.css';

Vue.use(iView);

import axios from 'axios'

/*

 * axios的引入

 */

Vue.prototype.axios=axios;

import './style/index.scss';

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

3、入口增加了

entry: {
app: ['babel-polyfill','./src/main.js']
},

4、vue-cli 打包压缩(npm run build)文件后,默认根目录修改，解决前后端代码结合的路径问题。

将config/index.js文件中的assetsPublicPath 值修改为你需要的根目录，原来默认是‘／’，下图中加上了"elkdashboard/"，“elkdashboard”是本项目的项目名，用tomcat起的服务URL默认根目录会加上“／项目名／”。这样将打包好的代码放到项目的webapp目录下就不会出现根目录不统一的情况了,改成'./'就成相对路径了

5、Iview字体图标 css文件引用的字体图标路径打包之后找不到

在vue-cli项目中build/utils.js中找到如下代码块，添加 
publicPath:’../../’

    if (options.extract) {

      return ExtractTextPlugin.extract({

        use: loaders,

        fallback: 'vue-style-loader',

        publicPath:'../../' //添加这句话

      })

    } else {

      return ['vue-style-loader'].concat(loaders)

    }

vue会用loader将项目中的各种本地URL转换 
build后F12查看network，发现资源404，并且去查找的路径是 
/dist/static/css/static/img/boston.0d72519.jpg 
显然，css中引用的图片地址有问题，需要返回上两级目录。 
CSS中引用的字体文件，图片文件路径错误的问题都解决了。