基于vue2.0的后管系统（配置篇）

一些项目依赖package.json

 {
   "name": "frontend",
   "description": "tssp based on vue2.0 frame",
   "version": "1.0.0",
   "author": "tom.h@vipshop.com",
   "private": true,
   "scripts": {
     "dev": "et -c element-variables.scss -o element-ui && cross-env NODE_ENV=development webpack --progress --hide-modules --config config/webpack.tssp.config.js",
     "start": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config config/webpack.tssp.config.js",
     "uattest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=uat webpack --progress --hide-modules --config config/webpack.tssp.config.js",
     "pretest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=pre webpack --progress --hide-modules --config config/webpack.tssp.config.js",
     "sittest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=sit webpack --progress --hide-modules --config config/webpack.tssp.config.js",
     "build": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config config/webpack.tssp.config.js"
   },
   "dependencies": {
     "axios": "^0.17.1",
     "babel-polyfill": "6.23.0",
     "echarts": "^4.1.0",
     "font-awesome": "^4.7.0",
     "qs": "^6.5.1",
     "vue": "2.5.0",
     "vue-progressbar": "^0.7.2",
     "vue-router": "2.3.1",
     "vuebar": "0.0.4",
     "vuex": "2.2.1"
   },
   "babel": {
     "presets": [
       "es2015",
       "stage-3"
     ],
     "ignore": [
         "./static/particles.js",
         "./static/jsencrypt.min.js"
       ]
   },
   "devDependencies": {
     "babel-core": "^6.24.0",
     "babel-loader": "^6.4.1",
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-stage-3": "^6.22.0",
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^3.2.4",
     "css-loader": "^0.27.3",
     "element-theme": "^2.0.1",
     "element-theme-chalk": "git+https://github.com/ElementUI/theme-chalk.git",
     "element-theme-default": "1.3.6",
     "element-ui": "^2.4",
     "express": "^4.16.2",
     "express-proxy-mock": "^1.2.13",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.10.1",
     "gulp": "^3.9.1",
     "gulp-git": "^2.2.0",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^2.28.0",
     "js-cookie": "^2.2.0",
     "node-sass": "^4.5.0",
     "postcss-css-variables": "0.7.0",
     "postcss-cssnext": "2.10.0",
     "postcss-import": "9.1.0",
     "postcss-loader": "1.3.3",
     "rimraf": "2.6.2",
     "sass-loader": "^5.0.1",
     "sass-resources-loader": "^1.3.1",
     "vue-lazy-render": "^1.0.20",
     "vue-loader": "11.3.4",
     "vue-style-loader": "2.0.5",
     "vue-template-compiler": "2.5.0",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.2",
     "webpack-merge": "^2.6.1"
   }
 }

一些打包脚本

"scripts": {
    "dev": "et -c element-variables.scss -o element-ui && cross-env NODE_ENV=development webpack --progress --hide-modules --config config/webpack.tssp.config.js",
    "start": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config config/webpack.tssp.config.js",
    "uattest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=uat webpack --progress --hide-modules --config config/webpack.tssp.config.js",
    "pretest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=pre webpack --progress --hide-modules --config config/webpack.tssp.config.js",
    "sittest": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=sit webpack --progress --hide-modules --config config/webpack.tssp.config.js",
    "build": "et -c element-variables.scss -o element-ui && node config/removefile.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config config/webpack.tssp.config.js"
  },

script解读：

et -c element-variables.scss -o element-ui  打包本地配置好的elementUI样式

cross-env NODE_ENV=development 将环境变量改成不同的值，对应不同模式的打包

webpack --progress --hide-modules --config config/webpack.tssp.config.js    根据config文件夹中的webpack.tssp.config.js配置打包文件，显示进度

webpack-dev-server --inline --hot --config config/webpack.tssp.config.js  启动webpack服务，开启热更新

babel解读：

"babel": {
    "presets": [
      "es2015",
      "stage-3"
    ],
    "ignore": [
        "./static/particles.js",
        "./static/jsencrypt.min.js"
      ]
  },

"presets": [ "es2015", "stage-3"] 将代码打包成es2015和stage-3

"ignore": ["./static/particles.js","./static/jsencrypt.min.js"] 忽略转义某些文件，一些库的脚本转义后会报错，故用之

webpack配置

webpack.tssp.config.js

 const path = require('path');
 const webpack = require('webpack');
 const cssnext = require('postcss-cssnext');
 const atImport = require('postcss-import');
 const cssvariables = require('postcss-css-variables');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');

 const devSrc = 'http://localhost:8099/static/';
 const devOutputPath = '../dist/static';
 const prodSrc = './static/';
 const prodOutputPath = '../dist/static';

 const Util = require('./util')

 const PATH_DIST = {
     font: 'font/',
     img: 'image/',
     css: 'css/',
     js: 'js/',
     root:'../'
 };
 const isProduction = process.env.NODE_ENV !== 'development'; //环境，dev、production
 const BASE_API_MAP = {
     "development": '""',
     "uat": '"http://11.114.0.12:8050/nfsm-uat/"',
     "sit": '"http://11.114.0.12:8050/nfsm-sit/"',
     "pre": '"http://11.111.1.5:8050/nfsm-pre/"',
     "production": '"http://22.231.1.5:10080/nfsm/"'
 }
 const UPLOADFILE_MAP = {
     "development": '"http://11.114.0.12:8050/nfsm-sit/"',
     "uat": '"http://11.114.0.12:8050/nfs-uat"',
     "sit": '"http://11.114.0.12:8050/nfs-sit"',
     "pre": '"http://11.111.1.5:8050/nfs-pre"',
     "production": '"http://22.231.1.5:10080/nfs"'
 }
 const proxyHost = 'http://11.114.0.12:8050/nfsm-sit/';

 const host = isProduction ? prodSrc : devSrc;
 const outputPath = isProduction ? prodOutputPath : devOutputPath;
 const extractElementUI = new ExtractTextPlugin(PATH_DIST.css + 'element.css' + (isProduction ? '?[contenthash:8]' : ''));
 const extractCSS = new ExtractTextPlugin(PATH_DIST.css + 'app.css' + (isProduction ? '?[contenthash:8]' : ''));

 module.exports = function (env) {
     let Config = {
         entry: {
             element: ['element-ui'],
             vue: ['vue', 'axios', 'vue-router', 'vuex'],
             app: './src/main.js'
         },
         output: {
             path: path.resolve(__dirname, outputPath),
             publicPath: host,
             filename: PATH_DIST.js + '[name].js' + (isProduction ? '?[chunkhash:8]' : '')
         },
         module: {
             rules: [{
                     test: /\.vue$/,
                     loader: 'vue-loader',
                     options: {
                         loaders: {
                             scss: Util.generateSassResourceLoader(),
                             sass: Util.generateSassResourceLoader(),
                             css: extractCSS.extract({
                                 use: 'css-loader!postcss-loader',
                                 fallback: 'vue-style-loader'
                             })
                         }
                     }
                 },
                 {
                     test: function (path) {
                         if (/\.css$/.test(path) && (/element-ui/).test(path)) {
                             console.log(path)
                             return true;
                         } else {
                             return false;
                         }
                     },
                     loader: extractElementUI.extract({
                         use: 'css-loader!postcss-loader'
                     })
                 },
                 {
                     test: function (path) {
                         if (/\.css$/.test(path) && !(/element-ui/).test(path)) {
                             return true;
                         } else {
                             return false;
                         }
                     },
                     loader: extractCSS.extract({
                         use: 'css-loader!postcss-loader'
                     })
                 },
                 {
                     test: /\.js$/,
                     loader: 'babel-loader',
                     exclude: /node_modules/
                 },
                 {
                     test: /\.(woff|svg|eot|ttf)\??.*$/, //字体文件
                     loader: 'file-loader',
                     options: {
                         publicPath: '../font/',
                         outputPath: PATH_DIST.font,
                         name: '[name].[ext]'
                     }
                 },
                 {
                     test: /\.(gif|jpg|png|ico)\??.*$/, //图片
                     loader: 'file-loader',
                     options: {
                         name: PATH_DIST.img + '[name].[ext]'
                     }
                 },
                 {
                     test: /\.scss$/,
                     use: Util.generateSassResourceLoader()
                 },
                 {
                     test: /\.sass/,
                     use: Util.generateSassResourceLoader()
                 },

             ]
         },
         plugins: [
             new webpack.optimize.CommonsChunkPlugin({
                 name: ['element', 'vue']
             }),
             extractElementUI,
             extractCSS,
             // copy custom static assets
             new CopyWebpackPlugin([{
                 from: path.resolve(__dirname, '../static'),
                 to: '',
                 ignore: ['.*']
             }]),
             new webpack.LoaderOptionsPlugin({
                 options: {
                     postcss: function () {
                         return [atImport({
                             path: [path.resolve(__dirname, '../src')]
                         }), cssnext, cssvariables];
                     }
                 },
                 minimize: isProduction
             }),
             new HtmlWebpackPlugin({
                 title: '消息推送平台',
                 template: 'index.html',
                 filename: '../index.html',
                 inject: false,
                 path: host,
                 chunks: ['element', 'vue', 'app']
             }),
             new webpack.DefinePlugin({
                 'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
                 'process.env.BASE_API': BASE_API_MAP[process.env.NODE_ENV],
                 'process.env.UPLOADFILE': UPLOADFILE_MAP[process.env.NODE_ENV]
             }),
         ],
         performance: {
             hints: isProduction ? 'warning' : false
         },
         devtool: isProduction ? false : '#eval-source-map',
         resolve: {
             alias: {
                 'src': path.resolve(__dirname, '../src'),
                 '@': path.resolve(__dirname, '../src'),
                 'lib': path.resolve(__dirname, '../static'),
                 'scss': path.resolve(__dirname, '../src/scss/')
             },
             extensions:[".js"]
         }
     };

     if (isProduction) {
         Config.plugins = Config.plugins.concat([
             new webpack.optimize.UglifyJsPlugin({
                 sourceMap: true,
                 compress: {
                     warnings: false
                 }
             })
         ]);
     } else {
         let context = ['/auth', '/myAccount', '/user', '/role', '/resource', '/task', '/enum', '/draft', '/customerLabel','/accessChannel']
         Config.devServer = {
             historyApiFallback: true,
             publicPath: '/static/',
             disableHostCheck: true,
             noInfo: true,
             hot: true,
             host: 'localhost',
             proxy: [{
                 context: context,
                 //target: 'http://11.112.0.100:9750',
                 target: proxyHost,
                 changeOrigin: true,
                 secure: false
             }/* , {
                 context: '/file',
                 target: 'http://11.112.0.100:9742',
                 changeOrigin: true,
                 secure: false
             } */],
             port: 8099,
             watchOptions: {
                 poll: false,
                 ignored: ['node_modules/**', 'config/**', 'common/**', 'dist/**']
             },
             headers: {
                 'Access-Control-Allow-Origin': '*'
             }
         };
     }
     return Config;
 };