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 }
原文地址：https://www.cnblogs.com/mhxy13867806343/p/8448589.html
时间： 2024-07-29 14:51:12