1. 插件的使用构建

（1）插件放置单独文件夹
每个插件一个文件夹，放在根目录，比如router，element-ui,vuex等

image.png
（2）插件使用配置和逻辑
插件相关配置和封装放在各自目录的index.js文件中，例如使用Vuex插件：

//插件声明
import Vuex from 'vuex'
Vue.use(Vuex);
//定义Store，封装
export default new Vuex.Store({
  modules: {
    common,
    user
  },
  mutations: {
    // 重置vuex本地储存状态
    resetStore (state) {
      Object.keys(state).forEach((key) => {
        state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key])
      })
    }
  },
  strict: process.env.NODE_ENV !== 'production'
})

image.png

一些逻辑处理，如element-ui插件的一些方法全局挂载到到Vue，方便在组件中使用。

//
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

然后在组件中通过this来访问，如

this.$alert
this.$confirm

（3）引入插件
在入口文件main.js引入插件,并且放在new Vue的前面（插件声明必须在此前）

//引入插件
import router from '@/router'                 // api: https://github.com/vuejs/vue-router
import store from '@/store'                   // api: https://github.com/vuejs/vuex
import VueCookie from 'vue-cookie'            // api: https://github.com/alfhen/vue-cookie
import '@/element-ui'                         // api: https://github.com/ElemeFE/element
import '@/icons'                              // api: http://www.iconfont.cn/
import '@/element-ui-theme'
//根实例注入router，store，组件中使用this.$router，this.$store访问
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
//也可以这样根实例注入router，store，在插件中
Vue.prototype.$store = router（插件中定义router对象）

2.全局对象和变量构建

2.1 全局挂载根组件

一些含有公共方法对象，为了避免在每个组件中引入，可以挂载到根组件Vue中，在组件中通过this来访问。挂载方式有两种：
（1）Vue.prototype属性实现
new Vue之前

//httpRequest: ajax请求服务端封装对象
import httpRequest from '@/utils/httpRequest' 
Vue.prototype.$http = httpRequest
//isAuth 是一个方法
import { isAuth } from '@/utils'
Vue.prototype.isAuth = isAuth     // 权限方法

（2）创建根实例时注入
new Vue时，比如router和store对象挂载

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

2.2 存储方式

（1）存储在window对象上

window.SITE_CONFIG = {}；
// 保存整站vuex本地储存初始状态
window.SITE_CONFIG['storeState'] = cloneDeep(store.state)；
  // api接口请求地址
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/API';

（1）Vuex存储
Vuex的作用是把组件的共享状态抽取出来，以一个全局单例模式管理。Vuex 是专门为 Vue.js 设计的状态管理库。具体详细看Vuex介绍

3.非编译Js的配置使用

3.1 具体使用

有一些Js文件，不需要经过webpack进行编译，如配置文件，echarts插件等，使用的时候在index.html中通过script引入即可，index.js是配置文件

  <% if (process.env.NODE_ENV === 'production') { %>
    <!-- 生产环境 -->
    <script>document.write('<script src="./config/index.js?t=' + new Date().getTime() + '"><\/script>');</script>
  <% }else { %>
    <!-- 开发环境 -->
    <link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico">
    <script src="./static/config/index.js"></script>
    <script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script>
    <script src="./static/plugins/echarts-3.8.5/echarts.common.min.js"></script>
    <script src="./static/plugins/ueditor-1.4.3.3/ueditor.config.js"></script>
    <script src="./static/plugins/ueditor-1.4.3.3/ueditor.all.min.js"></script>
    <script src="./static/plugins/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js"></script>
  <% } %>

相关配置文件存放单独的文件夹，路径和src，index.html并行

image.png

3.2 gulp编译

因为这些Js文件，不需要经过webpack进行编译，发布编译后的list目录下就没有这些文件，因此通过gulp工具进行编译输出文件，在这里通过gulp把所有文件编译成一个文件config/index.js，如上图。具体做法相见文章gulp在vue-cli的运用

4.webpack配置

（1）编译输出文件配置
我们需要对输出文件命名

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].js'),
    chunkFilename: utils.assetsPath('js/[id].js')
  },

（2）proxyTable代理配置
vue-cli框架自带了webpack-dev-server，具体查看package.json

    "webpack-dev-server": "^2.9.1",

因此我们在配置文件就可以对devServer进行配置，具体查看webpack.dev.conf.js文件，这里我们重点修改的代理配置

    // 代理列表, 是否开启代理通过[./dev.env.js]配置
    const devEnv = require('./dev.env')
    proxyTable:
      devEnv.OPEN_PROXY === false
        ? {}
        : {
            '/proxyApi': {
              target: 'http://192.168.0.10/api',// 目标接口的地址
              changeOrigin: true, // 是否跨域
              secure: true, // 如果是 https ,需要开启这个选项
              pathRewrite: {  // 重写路径
                '^/proxyApi': ''   //url的地址里面含有 '/proxyApi' 这样的替换成 ''
              }
            }
          }

http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}