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