5 년 전 · 12d747a0f3
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
 
				+/node_modules/
			
 
				+/dist/
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,2 @@
 
				+# webpackconfig
			
 
				+webpac简单搭建vue项目
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">   
			
 
				+    </div>
			
 
				+    <script src="/dist/main.build.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,37 @@
 
				+{
			
 
				+  "name": "webpackconfig",
			
 
				+  "version": "1.0.0",
			
 
				+  "description": "",
			
 
				+  "main": "index.js",
			
 
				+  "scripts": {
			
 
				+    "dev": "webpack-dev-server --mode=development --open --hot",
			
 
				+    "build": "webpack --mode=production --progress --hide-modules --config webpack.config.js",
			
 
				+    "test": "echo \"Error: no test specified\" && exit 1"
			
 
				+  },
			
 
				+  "author": "",
			
 
				+  "license": "ISC",
			
 
				+  "devDependencies": {
			
 
				+    "autoprefixer": "^9.4.7",
			
 
				+    "babel-core": "^6.26.3",
			
 
				+    "babel-loader": "^8.0.5",
			
 
				+    "babel-preset-env": "^1.7.0",
			
 
				+    "css-loader": "^2.1.0",
			
 
				+    "file-loader": "^3.0.1",
			
 
				+    "html-webpack-plugin": "^3.2.0",
			
 
				+    "node-sass": "^4.11.0",
			
 
				+    "postcss-loader": "^3.0.0",
			
 
				+    "sass-loader": "^7.1.0",
			
 
				+    "style-loader": "^0.23.1",
			
 
				+    "url-loader": "^1.1.2",
			
 
				+    "vue": "^2.6.6",
			
 
				+    "vue-loader": "^15.6.2",
			
 
				+    "vue-style-loader": "^4.1.2",
			
 
				+    "vue-template-compiler": "^2.6.6",
			
 
				+    "webpack": "^4.29.3",
			
 
				+    "webpack-cli": "^3.2.3",
			
 
				+    "webpack-dev-server": "^3.1.14"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "element-ui": "^2.6.1"
			
 
				+  }
			
 
				+}
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,40 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
			
 
				+        <el-radio-button :label="false">展开</el-radio-button>
			
 
				+        <el-radio-button :label="true">收起</el-radio-button>
			
 
				+    </el-radio-group>
			
 
				+    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
			
 
				+        <el-menu-item index="2">
			
 
				+            <i class="el-icon-menu"></i>
			
 
				+            <span slot="title">导航二</span>
			
 
				+        </el-menu-item>
			
 
				+        <el-menu-item index="4">
			
 
				+            <i class="el-icon-setting"></i>
			
 
				+            <span slot="title">导航四</span>
			
 
				+        </el-menu-item>
			
 
				+    </el-menu>
			
 
				+    <router-view/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+  export default {
			
 
				+    name: 'App',
			
 
				+    data() {
			
 
				+      return {
			
 
				+        isCollapse: true
			
 
				+      };
			
 
				+    },
			
 
				+    methods: {
			
 
				+      handleOpen(key, keyPath) {
			
 
				+        console.log(key, keyPath);
			
 
				+      },
			
 
				+      handleClose(key, keyPath) {
			
 
				+        console.log(key, keyPath);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+</script>
			
 
				+
			
 
				+
			
--- a/src/assets/a.png
+++ b/src/assets/a.png
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,11 @@
 
				+import Vue from 'vue';
			
 
				+import ElementUI from 'element-ui';
			
 
				+import 'element-ui/lib/theme-chalk/index.css';
			
 
				+import App from './App.vue';
			
 
				+
			
 
				+Vue.use(ElementUI);
			
 
				+
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  render: h => h(App)
			
 
				+});
			
--- a/src/pages/layout/Layout.vue
+++ b/src/pages/layout/Layout.vue
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -0,0 +1,63 @@
 
				+import axios from 'axios'
			
 
				+import { Message } from 'element-ui'
			
 
				+// 创建axios实例
			
 
				+const service = axios.create({
			
 
				+    baseURL: process.env.BASE_API, // api的base_url
			
 
				+    timeout: 5000 // 请求超时时间
			
 
				+})
			
 
				+
			
 
				+// request拦截器
			
 
				+service.interceptors.request.use(config => {
			
 
				+// Do something before request is sent
			
 
				+    if (store.getters.token) {
			
 
				+        config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
			
 
				+    }
			
 
				+    return config
			
 
				+    }, error => {
			
 
				+    // Do something with request error
			
 
				+    console.log(error) // for debug
			
 
				+    Promise.reject(error)
			
 
				+})
			
 
				+
			
 
				+// respone拦截器
			
 
				+service.interceptors.response.use(
			
 
				+    response => response,
			
 
				+/**
			
 
				+* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
			
 
				+* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
			
 
				+*/
			
 
				+//  const res = response.data;
			
 
				+//     if (res.code !== 20000) {
			
 
				+//       Message({
			
 
				+//         message: res.message,
			
 
				+//         type: 'error',
			
 
				+//         duration: 5 * 1000
			
 
				+//       });
			
 
				+//       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
			
 
				+//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
			
 
				+//         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
			
 
				+//           confirmButtonText: '重新登录',
			
 
				+//           cancelButtonText: '取消',
			
 
				+//           type: 'warning'
			
 
				+//         }).then(() => {
			
 
				+//           store.dispatch('FedLogOut').then(() => {
			
 
				+//             location.reload();// 为了重新实例化vue-router对象 避免bug
			
 
				+//           });
			
 
				+//         })
			
 
				+//       }
			
 
				+//       return Promise.reject('error');
			
 
				+//     } else {
			
 
				+//       return response.data;
			
 
				+//     }
			
 
				+    error => {
			
 
				+        console.log('err' + error)// for debug
			
 
				+        Message({
			
 
				+        message: error.message,
			
 
				+        type: 'error',
			
 
				+        duration: 5 * 1000
			
 
				+        })
			
 
				+        return Promise.reject(error)
			
 
				+    }
			
 
				+)
			
 
				+  
			
 
				+  export default service
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,74 @@
 
				+var path = require('path');
			
 
				+var HtmlWebpackPlugin = require('html-webpack-plugin');
			
 
				+var VueLoaderPlugin = require('vue-loader/lib/plugin');
			
 
				+const webpack = require('webpack');
			
 
				+
			
 
				+var config = {
			
 
				+    entry: './src/main.js',
			
 
				+    output: {
			
 
				+        path: path.resolve(__dirname + '/dist'),//打包生成文件地址
			
 
				+        filename: '[name].build.js',//生成文件ming
			
 
				+        publicPath: '/dist/'//文件输出的公共路径
			
 
				+    },
			
 
				+    module: {
			
 
				+        rules: [
			
 
				+            {
			
 
				+                test: '/\.js$/',
			
 
				+                use: [
			
 
				+                    {
			
 
				+                        loader: 'babel-loader',
			
 
				+                        options: {
			
 
				+                            presets: ['env']
			
 
				+                        }
			
 
				+                    }
			
 
				+                ],
			
 
				+                include: path.resolve(__dirname + '/src/'),
			
 
				+                exclude: /node_modules/,                
			
 
				+            },
			
 
				+            {
			
 
				+                test: /\.css$/,
			
 
				+                use:['style-loader','css-loader']
			
 
				+            },
			
 
				+            {
			
 
				+                test: /\.sass$/,
			
 
				+                use:['vue-style-loader', 'css-loader', 'sass-loader' ],
			
 
				+                include: path.resolve(__dirname + '/src/'),
			
 
				+                exclude: /node_modules/
			
 
				+            },
			
 
				+            {
			
 
				+                test: /\.(jpg|png|gif|svg)$/,
			
 
				+                use: 'url-loader',
			
 
				+                include: path.resolve(__dirname + '/src/'),
			
 
				+                exclude: /node_modules/
			
 
				+            },
			
 
				+            {
			
 
				+                test: /\.(eot|svg|ttf|woff|woff2)$/,
			
 
				+                loader: 'file-loader'
			
 
				+            },
			
 
				+            {
			
 
				+                test: /\.vue$/,
			
 
				+                loader: 'vue-loader'
			
 
				+            }
			
 
				+        ]
			
 
				+    },
			
 
				+    resolve: {
			
 
				+        extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
			
 
				+        alias: {
			
 
				+            'vue$': 'vue/dist/vue.esm.js',
			
 
				+            "@": path.resolve(__dirname, 'src'),
			
 
				+            "components": path.resolve(__dirname, '/src/components'),
			
 
				+            "utils": path.resolve(__dirname + '/src/utils')
			
 
				+        },
			
 
				+        modules: ['node_modules']
			
 
				+    },
			
 
				+    plugins: [
			
 
				+        new HtmlWebpackPlugin({
			
 
				+			template: 'index.html',
			
 
				+			chunks: ['main']            
			
 
				+        }),
			
 
				+        new VueLoaderPlugin(),
			
 
				+        new webpack.HotModuleReplacementPlugin()
			
 
				+    ]
			
 
				+}
			
 
				+
			
 
				+module.exports = config;