Iview的开发之路

采用了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中引用的字体文件，图片文件路径错误的问题都解决了。