前言: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)
文档很简略,但是大体是如上部署,自己体会一下过程。匆忙记录。有时间看能否写得更详细点