基于vue2.0的后管系统（配置篇）
一些项目依赖package.json
1 { 2 "name": "frontend", 3 "description": "tssp based on vue2.0 frame", 4 "version": "1.0.0", 5 "author": "tom.h@vipshop.com", 6 "private": true, 7 "scripts": { 8 "dev": "et -c element-variables.scss -o element-ui && cross-env NODE_ENV=development webpack --progress --hide-modules --config config/webpack.tssp.config.js", 9 "start": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config config/webpack.tssp.config.js", 10 "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", 11 "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", 12 "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", 13 "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" 14 }, 15 "dependencies": { 16 "axios": "^0.17.1", 17 "babel-polyfill": "6.23.0", 18 "echarts": "^4.1.0", 19 "font-awesome": "^4.7.0", 20 "qs": "^6.5.1", 21 "vue": "2.5.0", 22 "vue-progressbar": "^0.7.2", 23 "vue-router": "2.3.1", 24 "vuebar": "0.0.4", 25 "vuex": "2.2.1" 26 }, 27 "babel": { 28 "presets": [ 29 "es2015", 30 "stage-3" 31 ], 32 "ignore": [ 33 "./static/particles.js", 34 "./static/jsencrypt.min.js" 35 ] 36 }, 37 "devDependencies": { 38 "babel-core": "^6.24.0", 39 "babel-loader": "^6.4.1", 40 "babel-preset-es2015": "^6.24.0", 41 "babel-preset-stage-3": "^6.22.0", 42 "copy-webpack-plugin": "^4.0.1", 43 "cross-env": "^3.2.4", 44 "css-loader": "^0.27.3", 45 "element-theme": "^2.0.1", 46 "element-theme-chalk": "git+https://github.com/ElementUI/theme-chalk.git", 47 "element-theme-default": "1.3.6", 48 "element-ui": "^2.4", 49 "express": "^4.16.2", 50 "express-proxy-mock": "^1.2.13", 51 "extract-text-webpack-plugin": "^2.1.0", 52 "file-loader": "^0.10.1", 53 "gulp": "^3.9.1", 54 "gulp-git": "^2.2.0", 55 "gulp-util": "^3.0.8", 56 "html-webpack-plugin": "^2.28.0", 57 "js-cookie": "^2.2.0", 58 "node-sass": "^4.5.0", 59 "postcss-css-variables": "0.7.0", 60 "postcss-cssnext": "2.10.0", 61 "postcss-import": "9.1.0", 62 "postcss-loader": "1.3.3", 63 "rimraf": "2.6.2", 64 "sass-loader": "^5.0.1", 65 "sass-resources-loader": "^1.3.1", 66 "vue-lazy-render": "^1.0.20", 67 "vue-loader": "11.3.4", 68 "vue-style-loader": "2.0.5", 69 "vue-template-compiler": "2.5.0", 70 "webpack": "^2.2.1", 71 "webpack-dev-server": "^2.4.2", 72 "webpack-merge": "^2.6.1" 73 } 74 }
一些打包脚本
"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
1 const path = require('path'); 2 const webpack = require('webpack'); 3 const cssnext = require('postcss-cssnext'); 4 const atImport = require('postcss-import'); 5 const cssvariables = require('postcss-css-variables'); 6 const ExtractTextPlugin = require('extract-text-webpack-plugin'); 7 const HtmlWebpackPlugin = require('html-webpack-plugin'); 8 const CopyWebpackPlugin = require('copy-webpack-plugin'); 9 10 11 const devSrc = 'http://localhost:8099/static/'; 12 const devOutputPath = '../dist/static'; 13 const prodSrc = './static/'; 14 const prodOutputPath = '../dist/static'; 15 16 const Util = require('./util') 17 18 const PATH_DIST = { 19 font: 'font/', 20 img: 'image/', 21 css: 'css/', 22 js: 'js/', 23 root:'../' 24 }; 25 const isProduction = process.env.NODE_ENV !== 'development'; //环境，dev、production 26 const BASE_API_MAP = { 27 "development": '""', 28 "uat": '"http://11.114.0.12:8050/nfsm-uat/"', 29 "sit": '"http://11.114.0.12:8050/nfsm-sit/"', 30 "pre": '"http://11.111.1.5:8050/nfsm-pre/"', 31 "production": '"http://22.231.1.5:10080/nfsm/"' 32 } 33 const UPLOADFILE_MAP = { 34 "development": '"http://11.114.0.12:8050/nfsm-sit/"', 35 "uat": '"http://11.114.0.12:8050/nfs-uat"', 36 "sit": '"http://11.114.0.12:8050/nfs-sit"', 37 "pre": '"http://11.111.1.5:8050/nfs-pre"', 38 "production": '"http://22.231.1.5:10080/nfs"' 39 } 40 const proxyHost = 'http://11.114.0.12:8050/nfsm-sit/'; 41 42 const host = isProduction ? prodSrc : devSrc; 43 const outputPath = isProduction ? prodOutputPath : devOutputPath; 44 const extractElementUI = new ExtractTextPlugin(PATH_DIST.css + 'element.css' + (isProduction ? '?[contenthash:8]' : '')); 45 const extractCSS = new ExtractTextPlugin(PATH_DIST.css + 'app.css' + (isProduction ? '?[contenthash:8]' : '')); 46 47 module.exports = function (env) { 48 let Config = { 49 entry: { 50 element: ['element-ui'], 51 vue: ['vue', 'axios', 'vue-router', 'vuex'], 52 app: './src/main.js' 53 }, 54 output: { 55 path: path.resolve(__dirname, outputPath), 56 publicPath: host, 57 filename: PATH_DIST.js + '[name].js' + (isProduction ? '?[chunkhash:8]' : '') 58 }, 59 module: { 60 rules: [{ 61 test: /\.vue$/, 62 loader: 'vue-loader', 63 options: { 64 loaders: { 65 scss: Util.generateSassResourceLoader(), 66 sass: Util.generateSassResourceLoader(), 67 css: extractCSS.extract({ 68 use: 'css-loader!postcss-loader', 69 fallback: 'vue-style-loader' 70 }) 71 } 72 } 73 }, 74 { 75 test: function (path) { 76 if (/\.css$/.test(path) && (/element-ui/).test(path)) { 77 console.log(path) 78 return true; 79 } else { 80 return false; 81 } 82 }, 83 loader: extractElementUI.extract({ 84 use: 'css-loader!postcss-loader' 85 }) 86 }, 87 { 88 test: function (path) { 89 if (/\.css$/.test(path) && !(/element-ui/).test(path)) { 90 return true; 91 } else { 92 return false; 93 } 94 }, 95 loader: extractCSS.extract({ 96 use: 'css-loader!postcss-loader' 97 }) 98 }, 99 { 100 test: /\.js$/, 101 loader: 'babel-loader', 102 exclude: /node_modules/ 103 }, 104 { 105 test: /\.(woff|svg|eot|ttf)\??.*$/, //字体文件 106 loader: 'file-loader', 107 options: { 108 publicPath: '../font/', 109 outputPath: PATH_DIST.font, 110 name: '[name].[ext]' 111 } 112 }, 113 { 114 test: /\.(gif|jpg|png|ico)\??.*$/, //图片 115 loader: 'file-loader', 116 options: { 117 name: PATH_DIST.img + '[name].[ext]' 118 } 119 }, 120 { 121 test: /\.scss$/, 122 use: Util.generateSassResourceLoader() 123 }, 124 { 125 test: /\.sass/, 126 use: Util.generateSassResourceLoader() 127 }, 128 129 ] 130 }, 131 plugins: [ 132 new webpack.optimize.CommonsChunkPlugin({ 133 name: ['element', 'vue'] 134 }), 135 extractElementUI, 136 extractCSS, 137 // copy custom static assets 138 new CopyWebpackPlugin([{ 139 from: path.resolve(__dirname, '../static'), 140 to: '', 141 ignore: ['.*'] 142 }]), 143 new webpack.LoaderOptionsPlugin({ 144 options: { 145 postcss: function () { 146 return [atImport({ 147 path: [path.resolve(__dirname, '../src')] 148 }), cssnext, cssvariables]; 149 } 150 }, 151 minimize: isProduction 152 }), 153 new HtmlWebpackPlugin({ 154 title: '消息推送平台', 155 template: 'index.html', 156 filename: '../index.html', 157 inject: false, 158 path: host, 159 chunks: ['element', 'vue', 'app'] 160 }), 161 new webpack.DefinePlugin({ 162 'process.env.NODE_ENV': isProduction ? '"production"' : '"development"', 163 'process.env.BASE_API': BASE_API_MAP[process.env.NODE_ENV], 164 'process.env.UPLOADFILE': UPLOADFILE_MAP[process.env.NODE_ENV] 165 }), 166 ], 167 performance: { 168 hints: isProduction ? 'warning' : false 169 }, 170 devtool: isProduction ? false : '#eval-source-map', 171 resolve: { 172 alias: { 173 'src': path.resolve(__dirname, '../src'), 174 '@': path.resolve(__dirname, '../src'), 175 'lib': path.resolve(__dirname, '../static'), 176 'scss': path.resolve(__dirname, '../src/scss/') 177 }, 178 extensions:[".js"] 179 } 180 }; 181 182 if (isProduction) { 183 Config.plugins = Config.plugins.concat([ 184 new webpack.optimize.UglifyJsPlugin({ 185 sourceMap: true, 186 compress: { 187 warnings: false 188 } 189 }) 190 ]); 191 } else { 192 let context = ['/auth', '/myAccount', '/user', '/role', '/resource', '/task', '/enum', '/draft', '/customerLabel','/accessChannel'] 193 Config.devServer = { 194 historyApiFallback: true, 195 publicPath: '/static/', 196 disableHostCheck: true, 197 noInfo: true, 198 hot: true, 199 host: 'localhost', 200 proxy: [{ 201 context: context, 202 //target: 'http://11.112.0.100:9750', 203 target: proxyHost, 204 changeOrigin: true, 205 secure: false 206 }/* , { 207 context: '/file', 208 target: 'http://11.112.0.100:9742', 209 changeOrigin: true, 210 secure: false 211 } */], 212 port: 8099, 213 watchOptions: { 214 poll: false, 215 ignored: ['node_modules/**', 'config/**', 'common/**', 'dist/**'] 216 }, 217 headers: { 218 'Access-Control-Allow-Origin': '*' 219 } 220 }; 221 } 222 return Config; 223 };
