Iview的開發之路

採用了Vue-cli的方式。

 一、反向代理

  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
    }
  },

　　

 二、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/>'
})

　　

三、入口增長了

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

 四、vue-cli 打包壓縮(npm run build)文件後,默認根目錄修改，解決先後端代碼結合的路徑問題。

將config/index.js文件中的assetsPublicPath 值修改成你須要的根目錄，原來默認是‘／’，下圖中加上了"elkdashboard/"，「elkdashboard」是本項目的項目名，用tomcat起的服務URL默認根目錄會加上「／項目名／」。這樣將打包好的代碼放到項目的webapp目錄下就不會出現根目錄不統一的狀況了,改爲'./'就成相對路徑了

五、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中引用的字體文件，圖片文件路徑錯誤的問題都解決了。