vue项目之build文件、config文件配置--vue项目打包构建相关

前言

学习build文件、config文件配置可以帮助我们更快的了解打包构建知识

build文件、config文件配置相关了解

build 文件夹部分内容解析

build/build.js文件

// 设置打包环境是production
process.env.NODE_ENV = 'production'
在node中，有全局变量process表示的是当前的node进程。
process.env包含着关于系统环境的信息。
process.env中并不存在NODE_ENV这个东西。
NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的

oar包作用:

// 主要用来实现node.js命令行环境的loading效果，和显示各种状态的图标等
npm install --save ora
const ora = require('ora');
const spinner = ora('Loading unicorns').start();
setTimeout(() => {
	spinner.color = 'yellow';
	spinner.text = 'Loading rainbows';
}, 1000);
spinner.start();// 开始

rimraf 包的作用：

// 以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除
const rimraf = require('rimraf');
rimraf('./test.txt', function (err) { // 删除当前目录下的 test.txt
  console.log(err);
});

path模块

// 是node.js中处理路径的核心模块。可以很方便的处理关于文件路径的问题。
join() 将多个参数值合并成一个路径
const path = require('path')
path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
// chalk设置输出颜色
const chalk = require('chalk')
console.log(chalk.red(' Build failed with errors.\n’))
console.log(chalk.cyan(' Build complete.\n’))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))

config文件夹部分内容解析

config/index.js文件

开发环境和线上环境里面的配置项目全局路径、接口配置
webpack-merge做了两件事：它允许连接数组并合并对象，而不是覆盖组合

/config/prod.env.js 文件

'use strict'
module.exports = {
NODE_ENV: '"production"',
DEV_ENV: `'${process.env.DEV_ENV}’`,
//自定义参数,去设置线上的参数,打包的时候申明TYPE=“test”即可
TYPE: `'${process.env.TYPE}'`
}

打包命令设置

confing/prod.env.js文件

package.json文件

如上,针对打包命令设置了三个环境
其中构建命令TYPE = ** 属于自定义的属性,用来区分环境.

例如有跨域跳转需求的