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 = ** 屬於自定義的屬性,用來區分環境.

例如有跨域跳轉需求的