1 .babelrc文件 2 3 { 4 5 // 此项指明，转码的规则 6 7 "presets": [ 8 9 // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码 10 11 ["env", { "modules": false }], 12 13 // 下面这个是不同阶段出现的es语法，包含不同的转码插件 14 15 "stage-2" 16 17 ], 18 19 // 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译 20 21 "plugins": ["transform-runtime"], 22 23 // 下面指的是在生成的文件中，不产生注释 24 25 "comments": false, 26 27 // 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置 28 29 "env": { 30 31 // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development 32 33 "test": { 34 35 "presets": ["env", "stage-2"], 36 37 // instanbul是一个用来测试转码后代码的工具 38 39 "plugins": ["istanbul"] 40 41 } 42 43 } 44 45 } 46 47 48 49 vue-cli build目录中的 utils.js 配置文件 50 51 此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader 52 53 // 引入nodejs路径模块 54 55 var path = require(‘path‘) 56 57 // 引入config目录下的index.js配置文件 58 59 var config = require(‘../config‘) 60 61 // 引入extract-text-webpack-plugin插件，用来将css提取到单独的css文件中 62 63 // 详情请看(1) 64 65 var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘) 66 67 // exports其实就是一个对象，用来导出方法的最终还是使用module.exports，此处导出assetsPath 68 69 exports.assetsPath = function (_path) { 70 71 // 如果是生产环境assetsSubDirectory就是‘static‘，否则还是‘static‘， 72 73 var assetsSubDirectory = process.env.NODE_ENV === ‘production‘ 74 75 ? config.build.assetsSubDirectory 76 77 : config.dev.assetsSubDirectory 78 79 // path.join和path.posix.join的区别就是，前者返回的是完整的路径，后者返回的是完整路径的相对根路径 80 81 // 也就是说path.join的路径是C:a/a/b/xiangmu/b，那么path.posix.join就是b 82 83 return path.posix.join(assetsSubDirectory, _path) 84 85 // 所以这个方法的作用就是返回一个干净的相对根路径 86 87 } 88 89 90 91 // 下面是导出cssLoaders的相关配置 92 93 exports.cssLoaders = function (options) { 94 95 // options如果没值就是空对象 96 97 options = options || {} 98 99 // cssLoader的基本配置 100 101 var cssLoader = { 102 103 loader: ‘css-loader‘, 104 105 options: { 106 107 // options是用来传递参数给loader的 108 109 // minimize表示压缩，如果是生产环境就压缩css代码 110 111 minimize: process.env.NODE_ENV === ‘production‘, 112 113 // 是否开启cssmap，默认是false 114 115 sourceMap: options.sourceMap 116 117 } 118 119 } 120 121 122 123 // generate loader string to be used with extract text plugin 124 125 function generateLoaders (loader, loaderOptions) { 126 127 // 将上面的基础cssLoader配置放在一个数组里面 128 129 var loaders = [cssLoader] 130 131 // 如果该函数传递了单独的loader就加到这个loaders数组里面，这个loader可能是less,sass之类的 132 133 if (loader) { 134 135 loaders.push({ 136 137 // 加载对应的loader 138 139 loader: loader + ‘-loader‘, 140 141 // Object.assign是es6的方法，主要用来合并对象的，浅拷贝 142 143 options: Object.assign({}, loaderOptions, { 144 145 sourceMap: options.sourceMap 146 147 }) 148 149 }) 150 151 } 152 153 154 155 // Extract CSS when that option is specified 156 157 // (which is the case during production build) 158 159 // 注意这个extract是自定义的属性，可以定义在options里面，主要作用就是当配置为true就把文件单独提取，false表示不单独提取，这个可以在使用的时候单独配置，瞬间觉得vue作者好牛逼 160 161 if (options.extract) { 162 163 return ExtractTextPlugin.extract({ 164 165 use: loaders, 166 167 fallback: ‘vue-style-loader‘ 168 169 }) 170 171 } else { 172 173 return [‘vue-style-loader‘].concat(loaders) 174 175 } 176 177 // 上面这段代码就是用来返回最终读取和导入loader，来处理对应类型的文件 178 179 } 180 181 182 183 // https://vue-loader.vuejs.org/en/configurations/extract-css.html 184 185 return { 186 187 css: generateLoaders(), // css对应 vue-style-loader 和 css-loader 188 189 postcss: generateLoaders(), // postcss对应 vue-style-loader 和 css-loader 190 191 less: generateLoaders(‘less‘), // less对应 vue-style-loader 和 less-loader 192 193 sass: generateLoaders(‘sass‘, { indentedSyntax: true }), // sass对应 vue-style-loader 和 sass-loader 194 195 scss: generateLoaders(‘sass‘), // scss对应 vue-style-loader 和 sass-loader 196 197 stylus: generateLoaders(‘stylus‘), // stylus对应 vue-style-loader 和 stylus-loader 198 199 styl: generateLoaders(‘stylus‘) // styl对应 vue-style-loader 和 styl-loader 200 201 } 202 203 } 204 205 206 207 // Generate loaders for standalone style files (outside of .vue) 208 209 // 下面这个主要处理import这种方式导入的文件类型的打包，上面的exports.cssLoaders是为这一步服务的 210 211 exports.styleLoaders = function (options) { 212 213 var output = [] 214 215 // 下面就是生成的各种css文件的loader对象 216 217 var loaders = exports.cssLoaders(options) 218 219 for (var extension in loaders) { 220 221 // 把每一种文件的laoder都提取出来 222 223 var loader = loaders[extension] 224 225 output.push({ 226 227 // 把最终的结果都push到output数组中，大事搞定 228 229 test: new RegExp(‘\\.‘ + extension + ‘$‘), 230 231 use: loader 232 233 }) 234 235 } 236 237 return output 238 239 } 240 241 242 243 244 vue-cli脚手架config目录下index.js配置文件 245 246 此配置文件是用来定义开发环境和生产环境中所需要的参数 247 248 // see http://vuejs-templates.github.io/webpack for documentation. 249 250 // path是node.js的路径模块，用来处理路径统一的问题 251 252 var path = require(‘path‘) 253 254 255 256 module.exports = { 257 258 // 下面是build也就是生产编译环境下的一些配置 259 260 build: { 261 262 // 导入prod.env.js配置文件，只要用来指定当前环境，详细见(1) 263 264 env: require(‘./prod.env‘), 265 266 // 下面是相对路径的拼接，假如当前跟目录是config，那么下面配置的index属性的属性值就是dist/index.html 267 268 index: path.resolve(__dirname, ‘../dist/index.html‘), 269 270 // 下面定义的是静态资源的根目录 也就是dist目录 271 272 assetsRoot: path.resolve(__dirname, ‘../dist‘), 273 274 // 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static 275 276 assetsSubDirectory: ‘static‘, 277 278 // 下面定义的是静态资源的公开路径，也就是真正的引用路径 279 280 assetsPublicPath: ‘/‘, 281 282 // 下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现 283 284 productionSourceMap: true, 285 286 // Gzip off by default as many popular static hosts such as 287 288 // Surge or Netlify already gzip all static assets for you. 289 290 // Before setting to `true`, make sure to: 291 292 // npm install --save-dev compression-webpack-plugin 293 294 // 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin 295 296 productionGzip: false, 297 298 // 下面定义要压缩哪些类型的文件 299 300 productionGzipExtensions: [‘js‘, ‘css‘], 301 302 // Run the build command with an extra argument to 303 304 // View the bundle analyzer report after build finishes: 305 306 // `npm run build --report` 307 308 // Set to `true` or `false` to always turn it on or off 309 310 // 下面是用来开启编译完成后的报告，可以通过设置值为true和false来开启或关闭 311 312 // 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量，可以自行设置 313 314 bundleAnalyzerReport: process.env.npm_config_report 315 316 }, 317 318 dev: { 319 320 // 引入当前目录下的dev.env.js，用来指明开发环境，详见(2) 321 322 env: require(‘./dev.env‘), 323 324 // 下面是dev-server的端口号，可以自行更改 325 326 port: 8080, 327 328 // 下面表示是否自定代开浏览器 329 330 autoOpenBrowser: true, 331 332 assetsSubDirectory: ‘static‘, 333 334 assetsPublicPath: ‘/‘, 335 336 // 下面是代理表，作用是用来，建一个虚拟api服务器用来代理本机的请求，只能用于开发模式 337 338 // 详见(3) 339 340 proxyTable: {}, 341 342 // CSS Sourcemaps off by default because relative paths are "buggy" 343 344 // with this option, according to the CSS-Loader README 345 346 // (https://github.com/webpack/css-loader#sourcemaps) 347 348 // In our experience, they generally work as expected, 349 350 // just be aware of this issue when enabling this option. 351 352 // 是否生成css，map文件，上面这段英文就是说使用这个cssmap可能存在问题，但是按照经验，问题不大，可以使用 353 354 // 给人觉得没必要用这个，css出了问题，直接控制台不就完事了 355 356 cssSourceMap: false 357 358 } 359 360 } 361 362 注释 363 364 (1)下面是prod.env.js的配置内容 365 366 module.exports = { 367 368 // 作用很明显，就是导出一个对象，NODE_ENV是一个环境变量，指定production环境 369 370 NODE_ENV: ‘"production"‘ 371 372 } 373 374 (2)下面是dev.env.js的配置内容 375 376 // 首先引入的是webpack的merge插件，该插件是用来合并对象，也就是配置文件用的，相同的选项会被覆盖，至于这里为什么多次一举，可能另有他图吧 377 378 var merge = require(‘webpack-merge‘) 379 380 // 导入prod.env.js配置文件 381 382 var prodEnv = require(‘./prod.env‘) 383 384 // 将两个配置对象合并，最终结果是 NODE_ENV: ‘"development"‘ 385 386 module.exports = merge(prodEnv, { 387 388 NODE_ENV: ‘"development"‘ 389 390 }) 391 392 (3)下面是proxyTable的一般用法 393 394 vue-cli使用这个功能是借助http-proxy-middleware插件，一般解决跨域请求api 395 396 proxyTable: { 397 398 ‘/list‘: { 399 400 target: ‘http://api.xxxxxxxx.com‘, -> 目标url地址 401 402 changeOrigin: true, -> 指示是否跨域 403 404 pathRewrite: { 405 406 ‘^/list‘: ‘/list‘ -> 可以使用 /list 等价于 api.xxxxxxxx.com/list 407 408 } 409 410 } 411 412 }
