├── .babelrc
├── .editorconfig
├── .gitignore
├── README.md
├── dist
    ├── delete.png
    ├── vue-image-upload-preview.js
    └── vue-image-upload-preview.js.map
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── delete.png
    │   └── logo.png
    ├── lib
    │   ├── image-preview.vue
    │   ├── image-upload.vue
    │   └── index.js
    └── main.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "stage-3"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | npm-debug.log
 4 | yarn-error.log
 5 | 
 6 | # Editor directories and files
 7 | .idea
 8 | *.suo
 9 | *.ntvs*
10 | *.njsproj
11 | *.sln
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-image-upload-preview
  2 | [![npm version](https://img.shields.io/npm/v/vue-image-upload-preview.svg?style=flat)](https://www.npmjs.com/package/vue-image-upload-preview)
  3 | 
  4 | 基于vue的图片上传和预览插件
  5 | 
  6 | 该组件引用了 [mint-ui](https://github.com/ElemeFE/mint-ui) 和 [lrz](https://github.com/think2011/localResizeIMG)
  7 | 
  8 | ## Install
  9 | 
 10 | ```shell
 11 | npm install vue-image-upload-preview --save-dev
 12 | ```
 13 | ## Usage
 14 | 
 15 | - 引入图片上传和预览组件，可按需引入
 16 | ```js
 17 |   import {ImageUpload , ImagePreview} from 'vue-image-upload-preview'
 18 | ```
 19 | 
 20 | - 注册组件
 21 | ```js
 22 |   components:{
 23 |     'image-preview':ImagePreview,
 24 |     'image-upload':ImageUpload
 25 |   }
 26 | ```
 27 | 
 28 | - 使用组件
 29 | ```html
 30 |   <template>
 31 |     <div>
 32 |       <!-- 图片上传 -->
 33 |       <image-upload
 34 |        class="image-upload"
 35 |        ref='imgaeUpload'
 36 |        :url='http://XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
 37 |        :touch-size = 1
 38 |        :multiple = true
 39 |        :lrz-options = {width:1024}
 40 |        field-name = 'serverImgFile'
 41 |        :data = {}
 42 |        :max-count = 10
 43 |        @chooseImages='bindtap_chooseImages'
 44 |       />
 45 | 
 46 |       <!-- 图片预览 -->
 47 |       <image-preview
 48 |         style="z-index:200"
 49 |         :images="preImages"
 50 |         v-model="index"
 51 |         :numIsShow="true"
 52 |         :deleteIsShow="true"
 53 |         @delete="bindtap_delete"
 54 |       />
 55 | 
 56 |     </div>
 57 |   </template>
 58 | ```
 59 | 
 60 | - 绑定数据
 61 | ```js
 62 |     data() {
 63 |       return {
 64 |         index: -1,
 65 |         images: []
 66 |       }
 67 |     },
 68 | 
 69 |     computed:{
 70 |       preImages() {
 71 |         return this.images.map(v=>{return v.src});
 72 |       }
 73 |     }
 74 | ```
 75 | 
 76 | - 上传图片
 77 | ```js
 78 |   this.$refs.imgaeUpload.uploadImages(this.images)
 79 |   .then(res => {
 80 |     ...
 81 |   }).catch(res => {
 82 |     ...
 83 |   })
 84 | ```
 85 | 
 86 | - 自定义上传按钮样式
 87 | ```css
 88 |   .image_upload{  height: 60px; width: 60px;background: red}
 89 | ```
 90 | 
 91 | ## Props
 92 | 
 93 | ##### ImageUpload
 94 | - `url` - `String` - 上传图片的路径；
 95 | - `field-name` - `Stirng` - 上传图片的字段名；
 96 | - `multiple` - `Boolean` - [default:`false`] - 是否支持图片多选；
 97 | - `lrz-options` - `Object` - [default:`{quality:0.7}`] - 图片压缩选项，参考（https://github.com/think2011/localResizeIMG/wiki/2.-参数文档)；
 98 | - `max-count` - `Number` - [default:`-1`] - -1表示无限张；
 99 | - `chooseImages` - `Function` - 选择图片回调；
100 | ```js
101 |     bindtap_chooseImages(e){
102 |       /*
103 |        * 选择成功 e是一个数组
104 |        * e[0].file 图片文件对象，用于上传
105 |        * e[0].src 图片base64，用于预览
106 |        * e[0].compress 图片是否经过压缩
107 |        */
108 |        if(Array.isArray(e)){
109 |           this.images = this.images.concat(e);
110 |        }else {
111 |           console.log(e);
112 |        }
113 |     }
114 | ```
115 | ##### ImagePreview
116 | - `images` - `Array` - [default:`[]`] - 预览图片的所有路径；
117 | - `deleteIsShow` - `Boolean` - [default:`false`] - 是否显示删除按钮；
118 | - `numIsShow` - `Boolean` - [default:`false`] - 是否显示数字；
119 | - `chooseImages` - `Function` - 选择图片回调；
120 | ```js
121 |     bindtap_delete(e){
122 |       /*
123 |        * e 当前显示的图片的下标(双向绑定index，可以忽略e)
124 |        * this.images 存储选择图片传过来的对象
125 |        * this.index 双向绑定当前显示的图片的下标
126 |        * 下面是删除的例子
127 |        */
128 |       this.images = this.images.filter((v,i) => {
129 |         return this.index!=i;
130 |       })
131 |     },
132 | ```
133 | 
134 | 
135 | ## Notice
136 | - 使用方法仅供参考
137 | - /src/App.vue 有简单的例子 [demo](https://github.com/zhaodahai/vue-image-upload-preview/blob/master/src/App.vue)
138 | 


--------------------------------------------------------------------------------
/dist/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhaodahai/vue-image-upload-preview/33fe5e56b3a3a47bd09af9d042c2318ac0951381/dist/delete.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-image-upload-preview</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <script src="/dist/build.js"></script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-image-upload-preview",
 3 |   "description": "基于vue的图片上传和预览插件",
 4 |   "version": "1.0.2",
 5 |   "author": "zdh <zxh71_kg@163.com>",
 6 |   "license": "MIT",
 7 |   "private": false,
 8 |   "main": "dist/vue-image-upload-preview.js",
 9 |   "directories": {
10 |     "dist": "dist"
11 |   },
12 |   "scripts": {
13 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
14 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
15 |   },
16 |   "dependencies": {
17 |     "vue": "^2.5.11"
18 |   },
19 |   "browserslist": [
20 |     "> 1%",
21 |     "last 2 versions",
22 |     "not ie <= 8"
23 |   ],
24 |   "devDependencies": {
25 |     "babel-core": "^6.26.0",
26 |     "babel-loader": "^7.1.2",
27 |     "babel-preset-env": "^1.6.0",
28 |     "babel-preset-stage-3": "^6.24.1",
29 |     "cross-env": "^5.0.5",
30 |     "css-loader": "^0.28.7",
31 |     "file-loader": "^1.1.4",
32 |     "vue-loader": "^13.0.5",
33 |     "vue-template-compiler": "^2.4.4",
34 |     "webpack": "^3.6.0",
35 |     "webpack-dev-server": "^2.9.1",
36 |     "lrz": "^4.9.40",
37 |     "mint-ui": "^2.2.13"
38 |   },
39 |   "repository": {
40 |     "type": "git",
41 |     "url": "https://github.com/zhaodahai/vue-image-upload-preview.git"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <img src="./assets/logo.png">
  4 |     <h1>{{ msg }}</h1>
  5 |     <h2>Essential Links</h2>
  6 |     <image-upload
  7 |       class="image_upload"
  8 |       url='https://tsesb.yunjuhe.com.cn/medicalServer/doctor/uploadServerImage'
  9 |       :touch-size = 1
 10 |       :multiple = true
 11 |       field-name = 'serverImgFile'
 12 |       :max-count = 10
 13 |       @chooseImages='bindtap_chooseImages'
 14 |     />
 15 | 
 16 |     <img :src="image.src" alt="" v-for="(image , i) in images" @click="bingtap_preview(i)">
 17 | 
 18 |     <!-- 图片预览 -->
 19 |     <image-preview
 20 |       style="z-index:200"
 21 |       :images="preImages"
 22 |       v-model="index"
 23 |       :numIsShow="true"
 24 |       :deleteIsShow="true"
 25 |       @delete="bindtap_delete"
 26 |     />
 27 | 
 28 |     <div @click="bindtap_upload">
 29 |       上传
 30 |     </div>
 31 | 
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script>
 36 | 
 37 | import {ImageUpload , ImagePreview} from './lib/index.js'
 38 | 
 39 | export default {
 40 |   name: 'app',
 41 |   data () {
 42 |     return {
 43 |       msg: 'Welcome to Your Vue.js App',
 44 |       images:[],
 45 |       index:-1,
 46 |     }
 47 |   },
 48 | 
 49 |   computed:{
 50 |     // 预览图片路径
 51 |     preImages(){
 52 |       return this.images.map(v=>{return v.src});
 53 |     },
 54 |   },
 55 | 
 56 |   methods:{
 57 |     /**
 58 |      *  绑定函数 -- 选择图片
 59 |      */
 60 |     bindtap_chooseImages(res){
 61 |       if (Array.isArray(res)) {
 62 |         this.images = this.images.concat(res);
 63 |       }else {
 64 |         console.log(res);
 65 |       }
 66 |     },
 67 | 
 68 |     /**
 69 |      *  绑定函数 -- 删除图片
 70 |      */
 71 |     bindtap_delete(){
 72 |       this.images = this.images.filter((v,i) => {
 73 |         return this.index!=i;
 74 |       })
 75 |     },
 76 | 
 77 |     /**
 78 |      *  绑定函数 -- 预览图片
 79 |      */
 80 |     bingtap_preview(i){
 81 |       this.index = i;
 82 |     },
 83 | 
 84 |     /**
 85 |      *  绑定函数 -- 取消预览
 86 |      */
 87 |     bingtap_hiddenImg() {
 88 |       this.index = -1;
 89 |     },
 90 | 
 91 |     /**
 92 |      *  绑定函数 -- 上传图片
 93 |      */
 94 |     bindtap_upload(){
 95 |       this.$refs.imgaeUpload.uploadImages(this.images)
 96 |       .then(res => {
 97 |         console.log(res);
 98 |       })catch(err => {
 99 |         console.log(err);
100 |       })
101 |     }
102 |   },
103 | 
104 | 
105 |   components: {
106 |     'image-preview':ImagePreview,
107 |     'image-upload':ImageUpload
108 |   }
109 | }
110 | </script>
111 | 
112 | <style>
113 | *{padding:0;margin:0}
114 | img{height: 60px;width: 60px}
115 | 
116 | .image_upload{  height: 60px; width: 60px;background: red}
117 | 
118 | </style>
119 | 


--------------------------------------------------------------------------------
/src/assets/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhaodahai/vue-image-upload-preview/33fe5e56b3a3a47bd09af9d042c2318ac0951381/src/assets/delete.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhaodahai/vue-image-upload-preview/33fe5e56b3a3a47bd09af9d042c2318ac0951381/src/assets/logo.png


--------------------------------------------------------------------------------
/src/lib/image-preview.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 |   <transition name='shade'>
  4 |     <div class="shade flex-column-center" :value="value" v-show="visible" @touchmove.prevent >
  5 |       <div v-if="deleteIsShow||numIsShow" class="top-view flex-center">
  6 |         <p v-if="numIsShow">{{'( '+((value>0?value:index)+1)+' / '+images.length+' )'}}</p>
  7 |         <img v-if="deleteIsShow" src="../assets/delete.png" alt="" @click="bindtap_delete()">
  8 |       </div>
  9 |       <div class="image" :class="{image_full:!deleteIsShow&&!numIsShow}">
 10 |         <mt-swipe
 11 |           ref="imgSwipe"
 12 |           v-if="visible"
 13 |           :show-indicators="false"
 14 |           :auto="0"
 15 |           :continuous="false"
 16 |           :defaultIndex="value"
 17 |           @change="bindChange_index">
 18 |           <mt-swipe-item v-for="(image ,i) in images" :key="image">
 19 |             <img :src="image" alt="" @click='bingtap_hidden'>
 20 |           </mt-swipe-item>
 21 |         </mt-swipe>
 22 |       </div>
 23 |     </div>
 24 |   </transition>
 25 | </template>
 26 | 
 27 | <script>
 28 | 
 29 | import {Swipe, SwipeItem} from 'mint-ui';
 30 | 
 31 | export default {
 32 |   name:'image-preview',
 33 | 
 34 |   data(){
 35 |     return {
 36 |       // 是否显示
 37 |       visible:false,
 38 |       // 暂存index
 39 |       index:-1,
 40 |     }
 41 |   },
 42 | 
 43 |   props:{
 44 |     // 所有图片路径
 45 |     images:{
 46 |       type:Array,
 47 |       default:[]
 48 |     },
 49 |     // 删除按钮是否显示
 50 |     deleteIsShow:{
 51 |       type:Boolean,
 52 |       default:false
 53 |     },
 54 |     // 数字是否显示
 55 |     numIsShow:{
 56 |       type:Boolean,
 57 |       default:false
 58 |     },
 59 |     // 双向绑定value
 60 |     value:{
 61 |       type:Number,
 62 |       default:-1,
 63 |     }
 64 |   },
 65 | 
 66 |   methods:{
 67 | 
 68 |     bindChange_index(index){
 69 |       this.$emit('input' , index);
 70 |       this.$emit('change' , index);
 71 |     },
 72 | 
 73 |     bingtap_hidden(){
 74 |       this.$emit('input' , -1);
 75 |     },
 76 | 
 77 |     bindtap_delete(){
 78 |       this.$emit('delete');
 79 |     },
 80 |   },
 81 | 
 82 |   watch:{
 83 |     value(v){
 84 |       v >= 0 && (this.index = v);
 85 |       this.visible = (v >= 0);
 86 |     },
 87 |     images(v){
 88 |       v.length<=0 && (this.visible = false);
 89 |     }
 90 |   },
 91 | 
 92 |   components:{
 93 |     'mt-swipe':Swipe,
 94 |     'mt-swipe-item':SwipeItem,
 95 |   }
 96 | }
 97 | </script>
 98 | 
 99 | <style lang="css">
100 | .flex-center{display: flex;flex-direction: row;align-items: center;justify-content: center;}
101 | .flex-row-center{ display: flex;flex-direction: row;align-items: center;}
102 | .flex-column-center{display: flex;flex-direction: column; align-items: center;}
103 | /* 遮罩 */
104 | .shade{  width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.9);overflow: hidden;z-index: 100;transition:all 0.3s;}
105 | .shade-enter-active, .shade-leave-active {transition: opacity .5s}
106 | .shade-enter, .shade-leave-active {opacity: 0}
107 | .shade .top-view{height: 120px;width: 100%;position: relative}
108 | .shade .top-view p{color: white;font-size: 40px}
109 | .shade .top-view img{width: 50px;height: 50px;position: absolute;right: 60px}
110 | .shade .image {width: 100%;height: 80%;position: relative;}
111 | .shade .image_full{height: 100%}
112 | .shade .image img{position: absolute;top: 0;left: 0;height: 100%;width: 100%}
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/lib/image-upload.vue:
--------------------------------------------------------------------------------
  1 | <template >
  2 |   <div class="upload-button" align="center">
  3 |     <input
  4 |     :style="{'font-size':touchSize+'rem'}"
  5 |     type="file"
  6 |     value=""
  7 |     accept="image/png,image/jpg,image/gif,image/jpeg"
  8 |     :multiple=multiple
  9 |     @change='bindchange_chooseImages'
 10 |     />
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | 
 16 | import lrz from 'lrz';
 17 | 
 18 | export default {
 19 | 
 20 |   name:'image-upload',
 21 | 
 22 |   props:{
 23 |     // 上传图片字段名
 24 |     fieldName:'',
 25 |     // 上传地址
 26 |     url:'',
 27 |     // 是否支持多选
 28 |     multiple:{
 29 |       type:Boolean,
 30 |       default:false
 31 |     },
 32 |     // 接口是否支持多传
 33 |     multiUpload:{
 34 |       type:Boolean,
 35 |       default:false,
 36 |     },
 37 |     // 点击按钮的点击范围
 38 |     touchSize:{
 39 |       type:Number,
 40 |       default:0.5
 41 |     },
 42 |     // 压缩选项
 43 |     lrzOptions:{
 44 |       type:Object,
 45 |       default:function(){
 46 |         return {quality:0.7};
 47 |       }
 48 |     },
 49 |     // 上传其他参数
 50 |     data:{
 51 |       type:Object,
 52 |       default:function(){
 53 |         return {};
 54 |       }
 55 |     },
 56 |     // 限制张数
 57 |     maxCount:{
 58 |       type:Number,
 59 |       default:-1,//-1表示无限制
 60 |     }
 61 | 
 62 |   },
 63 | 
 64 |   methods:{
 65 |     /**
 66 |      *  绑定函数 -- 选择图片
 67 |      */
 68 |     bindchange_chooseImages(e){
 69 | 
 70 |       if (this.maxCount>=0 && e.target.files.length>this.maxCount) {
 71 |         return this.$emit('chooseImages','超过最大选择数量！');
 72 |       }
 73 | 
 74 |       this.parseImages(e.target.files)
 75 |       .then(res => {
 76 |         this.$emit('chooseImages',res);
 77 |       }).catch(e => {
 78 |         console.log(e);
 79 |       })
 80 |     },
 81 | 
 82 |     /**
 83 |      *  上传图片
 84 |      */
 85 |     uploadImages(images){
 86 |       if (this.multiUpload) {
 87 | 
 88 |       }else {
 89 |         let promises = [];
 90 |         images.forEach((v , i) => {
 91 |           if (!v.upload) {
 92 |             promises.push(this.uploadSingleImage(v.file));
 93 |           }
 94 |         })
 95 |         return Promise.all(promises)
 96 |       }
 97 | 
 98 |     },
 99 | 
100 |     /**
101 |      *  上传多张图片
102 |      *  TODO 等服务器支持多传之后再改
103 |      */
104 |     uploadMultipleImages(){
105 | 
106 |     },
107 | 
108 |     /**
109 |      *  上传单张图片
110 |      *
111 |      *  image：图片的file对象
112 |      */
113 |     uploadSingleImage(image){
114 |       return new Promise((resolve , reject) => {
115 |         var formData = new FormData();
116 |         formData.append(this.fieldName, image);
117 |         formData.append('type', 'image');
118 |         $.ajax({
119 |                   url: this.url,
120 |                   type: 'POST',
121 |                   dataType: 'JSON',
122 |                   cache: false,
123 |                   data: formData,
124 |                   processData: false,
125 |                   contentType: false,
126 |                   success: (res) => {
127 |                     resolve(res);
128 |                   },
129 |                   error: function(err) {
130 |                     reject(err);
131 |                   }
132 |               });
133 |       })
134 |     },
135 | 
136 | 
137 |     /**
138 |      *  解析图片
139 |      */
140 |     parseImages(files){
141 |       if (this.lrzOptions) {
142 |         return this.compressImages(files);
143 |       }else {
144 |         return this.readImages(files);
145 |       }
146 |     },
147 | 
148 |     /**
149 |      *  压缩图片
150 |      */
151 |     compressImages(files){
152 |       let promises = [];
153 |       for (var i = 0; i < files.length; i++) {
154 |           promises.push(lrz(files[i],{width: 1024}));
155 |       }
156 |       return new Promise((resolve , reject) => {
157 |         let images = [];
158 |         Promise.all(promises)
159 |         .then(res => {
160 |           res.forEach(v => {
161 |             images.push({file:v.file, src:v.base64, compress:true});
162 |           })
163 |           resolve(images);
164 |         }).catch(e => {
165 |           reject(e);
166 |         })
167 |       })
168 |     },
169 | 
170 |     /**
171 |      *  读取图片
172 |      */
173 |     readImages(files){
174 |       return new Promise((resolve , reject) => {
175 |         let images = [];
176 |         for (var i = 0; i < files.length; i++) {
177 |           let reader = new FileReader();
178 |           !function (j) {
179 |             reader.onload = function (e) {
180 |               images[j] = {file:files[j] , src:e.target.result , compress:false};
181 |               if (j === files.length-1) {
182 |                 resolve(images);
183 |               }
184 |             };
185 |           }(i);
186 |           reader.readAsDataURL(files[i]);
187 |         }
188 |       })
189 |     },
190 | 
191 | 
192 |   },
193 | }
194 | </script>
195 | 
196 | <style lang="css">
197 | .upload-button{position: relative;display: inline-block;overflow: hidden;}
198 | .upload-button input{position:absolute;left: 0rem; top: 0rem;opacity: 0.0;-ms-filter: 'alpha(opacity=0)';font-size: 0.5rem;}
199 | </style>
200 | 


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | 
2 | import ImageUpload from './image-upload';
3 | import ImagePreview from './image-preview';
4 | 
5 | export {ImageUpload, ImagePreview};
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | 
 5 | // import ImageUploadPreview from './lib/index.js'
 6 | // console.log(1111,ImageUploadPreview);
 7 | 
 8 | new Vue({
 9 |   el: '#app',
10 |   render: h => h(App)
11 | })
12 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/lib/index.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename:'vue-image-upload-preview.js',
10 |     library:'ImageUploadPreview',
11 |     libraryTarget:'umd',
12 |     umdNamedDefine:true
13 |   },
14 |   module: {
15 |     rules: [
16 |       {
17 |         test: /\.css$/,
18 |         use: [
19 |           'vue-style-loader',
20 |           'css-loader'
21 |         ],
22 |       },      {
23 |         test: /\.vue$/,
24 |         loader: 'vue-loader',
25 |         options: {
26 |           loaders: {
27 |           }
28 |           // other vue-loader options go here
29 |         }
30 |       },
31 |       {
32 |         test: /\.js$/,
33 |         loader: 'babel-loader',
34 |         exclude: /node_modules/
35 |       },
36 |       {
37 |         test: /\.(png|jpg|gif|svg)$/,
38 |         loader: 'file-loader',
39 |         options: {
40 |           name: '[name].[ext]?[hash]'
41 |         }
42 |       }
43 |     ]
44 |   },
45 |   resolve: {
46 |     alias: {
47 |       'vue$': 'vue/dist/vue.esm.js'
48 |     },
49 |     extensions: ['*', '.js', '.vue', '.json']
50 |   },
51 |   devServer: {
52 |     historyApiFallback: true,
53 |     noInfo: true,
54 |     overlay: true
55 |   },
56 |   performance: {
57 |     hints: false
58 |   },
59 |   devtool: '#eval-source-map'
60 | }
61 | 
62 | if (process.env.NODE_ENV === 'production') {
63 |   module.exports.devtool = '#source-map'
64 |   // http://vue-loader.vuejs.org/en/workflow/production.html
65 |   module.exports.plugins = (module.exports.plugins || []).concat([
66 |     new webpack.DefinePlugin({
67 |       'process.env': {
68 |         NODE_ENV: '"production"'
69 |       }
70 |     }),
71 |     new webpack.optimize.UglifyJsPlugin({
72 |       sourceMap: true,
73 |       compress: {
74 |         warnings: false
75 |       }
76 |     }),
77 |     new webpack.LoaderOptionsPlugin({
78 |       minimize: true
79 |     })
80 |   ])
81 | }
82 | 


--------------------------------------------------------------------------------