vue一键打包部署

摘录自: https://blog.csdn.net/weixin_43087487/article/details/90371869

在根目录创建一个publish.js文件

发布的时候 只要输入 node publish.js publish test就可以了

	// 一键打包部署

module.exports = function () {
    let O           = ‘xxx‘,  // 文件名
        Q           = require(‘q‘),
        del         = require(‘del‘),
        gulp        = require(‘gulp‘),
        zip         = require(‘gulp-zip‘),
        node_ssh    = require(‘node-ssh‘),
        colors      = require(‘colors/safe‘),
        dateFormat  = require(‘dateformat‘),
        argv        = process.argv,
        fs          = require(‘fs‘),
        path        = require(‘path‘),
        exec        = require(‘child_process‘).exec,
        IPs			= [{
            host: ‘xx.xx.xx.xx‘,  // 中控地址
            post: 22,
            user: ‘root‘,
            dist: ‘/root‘,
            privateKey: ‘/Users/.ssh/id_rsa‘   //  本地ssh
        }],
        SERVER 		= {
        	// 这里可以写多个服务器
			‘test‘: {
				type: ‘test‘,
                host: ‘xx.xx.xx.xx‘,  // 服务器地址
                port: 22,
                user: ‘‘,
                dist: ‘/xx‘,  // 路径
                privateKey: ‘‘
            }
        },
        center 		= new node_ssh(),
        zipfile 	= O + ‘-‘ + dateFormat(new Date(), ‘yyyy-mm-dd-HH-MM-ss‘) + ‘.zip‘;

        if (‘publish‘ !== argv[2]) {
			process.stdout.write(colors.green(‘Do you mean "publish"?\n‘));
            return
		}

		if (!SERVER[argv[3]]) {
			process.stdout.write(colors.green(‘\x20SERVER REQUIRED!\n‘));
            process.stdout.write(colors.blue(‘\x20-node dist.publish.js test\n‘));
            process.stdout.write(colors.blue(‘\x20-node dist.publish.js prod\n‘));
            return
		}
        IPs.push(SERVER[argv[3]]);
        const testFilename = ‘devdata.json‘,
              prodFilename = ‘prodata.json‘
              newname = ‘domaindata.json‘,
              destPath = path.join(__dirname, ‘./src/views/activity/‘, newname),
              sourceFile = ‘‘

        // 第一步,build
        var BUILD = function () {
        	var defered = Q.defer();
	        process.stdout.write(colors.green(‘1、: build -> \n‘));
	        process.stdout.write(colors.blue(‘\x20\x20\x20 build project...\n‘));
	        exec(‘npm run build‘, function(error, stdout, stderr) {
	            process.stdout.write(colors.green(‘\x20\x20\x20 success\n‘));
	            defered.resolve(true);
            });
	        return defered.promise;
        }

        // 第二步,将build后dist目录下的文件copy到zip,并命名yx-page
        var COPYTOZIP = function () {
        	var deferred = Q.defer();
            process.stdout.write(colors.green(‘2. copy -> \n‘));
            process.stdout.write(colors.blue(‘\x20\x20\x20 copy...\n‘));
            gulp.src([‘./dist/**‘])
                .pipe(gulp.dest(‘zip/yx-page‘))
                .on(‘finish‘, function () {
                    process.stdout.write(colors.green(‘\x20\x20\x20 copy successfully!\n‘));
                    deferred.resolve(true);
                })
                .on(‘error‘, function (error) {
                    deferred.reject(new Error(error));
                })
            return deferred.promise
        }

        // 第三步,打包压缩zip文件夹里的yx-page
        var ZIPFILE = function () {
            var deferred = Q.defer();
            process.stdout.write(colors.green(‘3. zipfile -> \n‘));
            process.stdout.write(colors.blue(‘\x20\x20\x20 zip packing...\n‘));
            gulp.src([
                ‘zip/**‘
            ])
            .pipe(zip(zipfile))
            .pipe(gulp.dest(‘zip‘))
            .on(‘finish‘, function () {
                process.stdout.write(colors.green(‘\x20\x20\x20 zip packed successfully!\n‘));
                deferred.resolve(zipfile);
            })
            .on(‘error‘, function () {
                process.stdout.write(colors.red(‘\x20\x20\x20 zip packed field!\n‘));
                deferred.reject(new Error(error));
            });
            return deferred.promise;
        }

        // 第四步,上传至中控
        var UPLOAD = function (file) {
            var deferred = Q.defer();
            process.stdout.write(colors.green(‘4. upload: \n‘));
            process.stdout.write(colors.blue(‘\x20\x20\x20 upload ‘ + file + ‘ to ‘ + IPs[0].host + ‘...\n‘));
            exec(‘scp ./zip/‘ + file + ‘ ‘ + IPs[0].user + ‘@‘ + IPs[0].host + ‘:‘ + IPs[0].dist, function (error, stdout, stderr) {
                process.stdout.write(colors.blue(‘\x20\x20\x20 upload to ‘ + IPs[0].host + ‘successfully! \n‘));
                deferred.resolve(file)
            })
            return deferred.promise;
        }

        // 第五步,连接中控机
        var CONNECT = function (file) {
            var deferred = Q.defer();
            process.stdout.write(colors.green(‘5. login: \n‘));
            process.stdout.write(colors.blue(‘\x20\x20\x20 login ‘ + IPs[0].host + ‘...\n‘));
            center.connect({
                host: IPs[0].host,
                port: IPs[0].port,
                username: IPs[0].user,
                privateKey: IPs[0].privateKey
            }).then( () => {
                process.stdout.write(colors.blue(‘\x20\x20\x20 welcome to ‘ + IPs[0].host + ‘!\n‘));
                deferred.resolve(file);
            })
            return deferred.promise
        }

        // 第六步,解压文件
        var UNZIPFILE = function (file) {
            var deferred = Q.defer();
            process.stdout.write(colors.green(‘6. unzip: \n‘));
            center.exec(‘unzip -o ‘ + IPs[0].dist + ‘/‘ + file)
            .then(function (result) {
                process.stdout.write(colors.blue(‘\x20\x20\x20 unzip successfully! \n‘));
                deferred.resolve(file);
            });
            return deferred.promise;
        }

        // 第起步,将文件拷贝到服务器
        var COPYTOSERVER = function (file) {
            var deferred = Q.defer();
            process.stdout.write(colors.green(‘7. copy to server: \n‘));
            process.stdout.write(colors.blue(‘\x20\x20\x20 copy ‘+ O +‘ to ‘ + IPs[1].host + ‘!\n‘));
            center.exec(‘scp -r ‘ + IPs[0].dist + ‘/‘ + O + ‘ ‘ + IPs[1].host + ‘:‘ + IPs[1].dist)
            .then(function (result) {
                process.stdout.write(colors.blue(‘\x20\x20\x20 copy successfully!\n‘));
                deferred.resolve(file);
            });
            return deferred.promise;
        }

        // 第八步,删除打包文件
        var DELZIPSERVERFILE = function (file) {
            var deferred = Q.defer();
            process.stdout.write(colors.green(‘8. del zip.file: \n‘));
            center.exec(‘rm -rf ‘ + file + ‘ ‘ + O + ‘/‘).then(function (result) {
                process.stdout.write(colors.blue(‘\x20\x20\x20 del successfully!\n‘));
                deferred.resolve(true);
                delDir(‘zip‘)
            });
            return deferred.promise;
        }
        // 第九步,成功提示
        var SUCCESS = function () {
            var deferred = Q.defer();
            center.dispose();
            process.stdout.write(colors.green(‘\x20PUBLISH SUCCESSFULLY!\n‘));
            deferred.resolve(true);
            return deferred.promise
        }

        // 第十步,错误统一处理
        var ERROR_CATCH = function (error) {
            process.stdout.write(colors.red(‘Wrong Message: \n‘))
            process.stdout.write(colors.red(error.message + ‘\n‘))
        }
        // 删除本地zip文件
        function delDir(path){
            let files = []
            if(fs.existsSync(path)){
                files = fs.readdirSync(path)
                files.forEach((file, index) => {
                    let curPath = path + "/" + file
                    if(fs.statSync(curPath).isDirectory()){
                        delDir(curPath)
                    } else {
                        fs.unlinkSync(curPath)
                    }
                });
                fs.rmdirSync(path);
            }
        }
        Q.fcall(BUILD)
            .then(COPY)
        	.then(COPYTOZIP)
        	.then(ZIPFILE)
        	.then(UPLOAD)
            .then(CONNECT)
            .then(UNZIPFILE)
            .then(COPYTOSERVER)
            .then(DELZIPSERVERFILE)
            .then(SUCCESS)
            .catch(ERROR_CATCH)
            .done()
}()

  

原文地址:https://www.cnblogs.com/buyiblogs/p/12655427.html

时间: 2024-10-10 11:53:30

vue一键打包部署的相关文章

vue项目打包部署生产环境

vue项目打包部署生产环境 打包部署生产环境之前需要修改配置文件: 修改一:build > utils.js  (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 修改二:config > index.js (修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题) 两个文件修改完成之后,运行命令:npm run build 打包直接访问dist文件夹中的index.html即可. 原文地址:https:

vue项目打包部署-----解决打包后访问资源失败问题

vue项目打包部署-----解决打包后访问资源失败问题. 本文链接:https://blog.csdn.net/kaola_l/article/details/80497490 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找

Vue项目打包部署到apache服务器

vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

vue项目打包部署elementUI的字体图标丢失问题

自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下webpack.base.conf.js文件) { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].

vue项目打包部署tomcat注意事项

1.修改config/index.js中的 assetsPublicPath:'./' 2.集成vue-router的话,修改router.js,如下图: 3.修改build/util.js,如下图, 4.在tomcat的webapps目录下新建一个第二步中base指定的目录名(本例为declaring),将打包后的文件放到declaring目录下即可. 原文地址:https://www.cnblogs.com/zifayin/p/8312677.html

Vue项目webpack打包部署到服务器

Vue项目webpack打包部署到服务器 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库"),我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run buil

Vue生产环境部署

前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue生产环境部署 生产环境 如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,

Linux平台(Centos7)-lnmp一键式部署mysql,nginx,php,php-fpm服务

Linux平台(Centos7)-lnmp一键式部署mysql,nginx,php,php-fpm服务 1. 部署方式1:手动部署. 6 1.1. 配置防火墙. 6 1.2. 关闭firewall 6 1.3. 安装iptables防火墙. 6 1.4. 安装Apache 7 1.5. 安装MariaDB 9 1.5.1. 安装MariaDB 9 1.5.2. 启动服务. 10 1.5.3. 设置开机启动. 10 1.5.4. 为root账户设置密码. 11 1.5.5. 重启MariaDB 1

如何把vue.js项目部署到服务器上

如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSourceMap: false 2-运行npm run build 然后在项目路径中找到打包后的文件,在项目文件的dist文件夹下面的static和index.html就是打包后的文件.然后我自己创建了cccBlog文件夹,把static和index.html拷贝到cccBlog下面,然后向服务器上传这个