记录vue-cli2打包项目静态文件夹static到七牛云存储上，并使用七牛云融合cdn的过程

本文链接： https://blog.csdn.net/qq_27295403/article/details/102687191

前言：vue-cli2打包项目静态文件夹static到七牛云存储上，并使用七牛云融合cdn

1.前期准备

npm install --save jsonfile jsonfile扩展说明文档
npm install argv argv扩展说明文档
npm install qiniu 七牛扩展
npm install qiniu-tools --save qiniu-tools扩展说明文档

2.修改package.json（执行打包，替换npm run build命令）

在package.json的scripts参数下新增

"xxx": "node build/build.js --deploy --env=production"

xxx可自己设置命令名，如

"auto-pro": "node build/build.js --deploy --env=production"

即执行 npm run auto-pro

3.修改config/index.js下build->index和build->assetsRoot属性

将dist修改为dist_temp，为什么呢。主要是打包替换，成功打包文件夹dist_temp后，删除原有打包文件夹dist。再重命名dist_temp为dist，这部分在第5步的代码大家自己体会

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist_temp/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist_temp'),

}

4.根目录下创建.env.json文件(配置文件参数的设置请参考qiniu-tools扩展说明文档)

publish参数是用于将该项目打包后的index.html移动到总项目文件目录（多项目配置），比如PC+移动端+微信端的前端html集中在一个文件夹xx-fe下，而后台则在其子目录manage下，便于统一管理

"production": {
  "qiniu": {
    "enabled": true,
    "accessKey": "xxx",
    "secretKey": "xxx",
    "bucket": "xx",
    "zone": "xx",
    "origin": "xx",
    "publish": [
      [
        "dist/index.html",
        "../xx-fe/manage/index.html"
      ]
    ]
  }
}

5，最重要的build.js修改

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const fs = require('fs')

const jsonfile = require('jsonfile')
const argv = require('argv')
const qiniuTools = require('qiniu-tools')
const env = jsonfile.readFileSync('.env.json')

const args = argv.option([
  {
    name: 'deploy',
    short: 'd',
    type: 'boolean',
    description: '打包后部署到七牛云'
  },
  {
    name: 'env',
    short: 'e',
    type: 'string',
    description: '部署环境 production=开发环境'
  }
]).run()

let envConfig = null

function conf () {
  if (['production'].indexOf(args.options.env) >= 0) {
    if (env[args.options.env]) {
      envConfig = env[args.options.env]
      if (envConfig.qiniu.enabled) webpackConfig.output.publicPath = `${envConfig.qiniu.origin}/yourmao/manage/`
    } else throw new Error('.env.json 文件未正确配置')
  } else throw new Error('--env 参数错误 testing=测试环境 production=开发环境')
}

function build () {
  return new Promise((resolve, reject) => {
    env.environment = args.options.env || 'production'
    jsonfile.writeFileSync('.env.json', env, { spaces: 2 })

    console.log(`输出路径：${config.build.assetsRoot}\n`)
    const spinner = ora('正在打包...').start()
    !fs.existsSync('dist_temp') && fs.mkdirSync('dist_temp')
    rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
      if (err) throw err
      webpack(webpackConfig, function (err, stats) {
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({
          colors: true,
          modules: false,
          children: false,
          chunks: false,
          chunkModules: false
        }) + '\n\n')
        if (stats.hasErrors()) {
          console.log(chalk.red('打包失败！\n'))
          process.exit(1)
        }
        console.log('删除旧的 dist 文件夹...\n')
        rm(path.resolve(__dirname, '../dist'), err => {
          if (err) throw err
          console.log('将临时文件夹 dist_temp 重命名为 dist ...\n')
          fs.renameSync('dist_temp', 'dist')
          console.log(chalk.cyan('项目构建完毕\n'))

          delete env.environment
          jsonfile.writeFileSync('.env.json', env, { spaces: 2 })

          resolve()
        })
      })
    })
  })
}

function deploy () {
  if (args.options.deploy) {
    console.log('部署静态资源到七牛云...')
    console.log(`bucket: ${envConfig.qiniu.bucket}`)
    console.log(`origin: ${envConfig.qiniu.origin}\n`)
    qiniuTools.config(envConfig.qiniu)
    qiniuTools.push({
      path: 'dist/static',
      prefix: 'yourmao/manage/static',
      success: function () {
        console.log('\n静态资源部署完毕！\n')
        if (Array.isArray(envConfig.qiniu.publish)) {
          console.log('发布文件...')
          envConfig.qiniu.publish.forEach(item => {
            console.log(`发布文件：${item[0]} => ${item[1]}`)
            fs.copyFileSync(item[0], item[1])
          })
          console.log('发布完毕！\n')
        }
        process.exit()
      },
      failed: function () {
        console.log('静态资源部署失败！\n')
        process.exit()
      }
    })
  }
}

conf()

build().then(deploy)

文档很简略，但是大体是如上部署，自己体会一下过程。匆忙记录。有时间看能否写得更详细点