基于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 };








        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/peace1/p/vueProjectSystem_1.html