webpack（vue）初始化配置

1. 运行项目，浏览页面自动打开

npm run dev后运行项目无法自动打开页面，需要在package.json中添加--open，就可以自动打开页面了。

2. css 样式初始化

为了保证各个浏览器 css 样式一致，引入 css 初始化样式文件。（normalize.css）无法下载的，请下载我上传的。（。。。后续补充）我上传的正在审核，耐心等待。

1. 一般不经常改变的文件我喜欢放在assets中，在assets创建各类资源的文件夹。
2. 在main.js全局引入 css 样式初始化文件。import "@/assets/css/normalize.css"

3. 引入 element-ui

为了减少打包体积，外链式引入ele-ui

1. 在index.html添加 vue 和 ele-ui 外链

!-- 开发版，开发过程中使用此方案-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产版，打包的时候使用此方案 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.9/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.4.9/lib/index.js"></script>

2. 在main.js中进行修改如下所示

	// import Vue from 'vue'	    // 需要注释掉全局本地引入的vue
	Vue.use(ELEMENT);			    // 在外部引入的element-ui的为ELEMENT，如此写即可

3. 在build\webpack.base.conf.js中进行修改，在module.exports中添加如下内容：

	externals:{
	  "element-ui":"ELEMENT",
	  "vue":"Vue"
	},
	// 意思为不进行打包的文件，如不设置，外部引入的内容将会被打包

4. 封装“axios”模块

为了方便使用就封装了 axios 了，具有请求队列并防止重复请求功能，错误消息提示，页面自动跳转，token 等功能。

1. 下载 axios 和 querystring
2. 代码如下：(因为在 csdn 中下载资源必须要积分，只能直接贴出来了)

	//引入axios
	import axios from 'axios'
	import staticConfig from './config'      // 引入的api ，
	import router from '../../router'
	import {
	  Message
	} from 'element-ui';
	import querystring from 'querystring'

	let cancel, promiseArr = {}
	const CancelToken = axios.CancelToken;

	// "请求" 拦截器
	axios.interceptors.request.use(config => {
	  //发起请求时，取消掉当前正在进行的相同请求
	  if (promiseArr[config.url]) {
	    promiseArr[config.url]('操作取消')
	    promiseArr[config.url] = cancel
	  } else {
	    promiseArr[config.url] = cancel
	  }
	  return config
	}, error => {
	  return Promise.reject(error)
	})

	// "响应" 拦截器即异常处理
	axios.interceptors.response.use(response => {
	  return response;
	}, err => {
	  if (err && err.response) {
	    switch (err.response.status) {
	      case 400:
	        err = '错误请求'
	        break;
	      case 401:
	        setTimeout(() => {        // 拦截并跳转
	          router.push("/")
	        }, 2010);
	        err = '登录过期，请重新登录'
	        break;
	      default:
	        err = `连接错误${err.response.status}`
	    }
	  } else {
	    err = "连接到服务器失败"
	  }
	  Message({               // 消息提示
	    message: err,
	    type: "warning",
	    duration: 2000
	  })
	  return Promise.resolve(err.response)
	})

	// 设置默认
	axios.defaults.baseURL = staticConfig.api;    //  assets/js/config.js
	//设置默认请求头
	axios.defaults.headers = {
	  "content-type": "application/x-www-form-urlencoded",   // 后台要求的方式   form表单或者json（json需要自己改了）
	  "token": "1234567891234124"
	}
	axios.defaults.timeout = 50000 // 访问时间
	export default {
	  //get请求
	  get(url, param) {
	    return new Promise((resolve, reject) => {
	      axios({
	        method: 'get',
	        url: url,
	        params: param,
	        cancelToken: new CancelToken(c => {
	          cancel = c
	        })
	      }).then(res => {
	        resolve(res)
	      })
	    })
	  },
	  //post请求
	  post(url, param) {
	    return new Promise((resolve, reject) => {
	      axios({
	        method: 'post',
	        url: url,
	        data: querystring.stringify(param),
	        cancelToken: new CancelToken(c => {
	          cancel = c
	        })
	      }).then(res => {
	        resolve(res)
	      })
	    })
	  },
	  put(url, param) {
	    return new Promise((resolve, reject) => {
	      axios({
	        method: 'put',
	        url: url,
	        data: querystring.stringify(param),
	        cancelToken: new CancelToken(c => {
	          cancel = c
	        })
	      }).then(res => {
	        resolve(res)
	      })
	    })
	  },
	  delete(url, param) {
	    return new Promise((resolve, reject) => {
	      axios({
	        method: 'delete',
	        url: url,
	        data: querystring.stringify(param),
	        cancelToken: new CancelToken(c => {
	          cancel = c
	        })
	      }).then(res => {
	        resolve(res)
	      })
	    })
	  }
	};

3. config.js创建公共配置文件

   我平常在assets/js/创建 config文件用来存放一些公共配置

	export default {
	  api: "http://XXXXXXXXXXXXX",
	  imgApi: "http://XXXXXXXXXXXXX",
	}

4. 全局引入

在main.js中，添加如下代码

	import EmmaAxios from './assets/js/http';
	Vue.prototype.$EmmaAxios = EmmaAxios;

5. 使用

      this.$EmmaAxios
        .get("/doctor/checkDoctor", {
          updatorId: this.updatorId
        })
        .then(response => {
        });

5. 解决打包的图片不显示的问题

打包后出现图片不显示的问题

修改build/utils.js文件，添加publicPath: "../../"

6. 压缩打包

在config\index.js中进行修改

productionGzip: true,  //需要下载相应的包 npm install --save-dev compression-webpack-plugin

在这里需要注意的是现在下载的compression-webpack-plugin插件的版本未 2.0.0，所以会出现打包出错的问题。应该怎么解决这个问题呢？
分析原因：看compression-webpack-plugin文档有说明（This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.），compression-webpack-plugin需要与 webpack4.X 版本相结合才可以，但是我相信有很多小伙伴的webpack的版本还在 3.X。所以总结出了以下两种解决办法：

1. 升级webpack的版本到 4.X
2. 指定compression-webpack-plugin的版本compression-webpack-plugin@1.1.12

以上两种方案既可解决 vue 项目压缩打包失败的问题

7. 项目地址

初始化模板地址：https://github.com/sowhatwill/demo.git