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
}
