精华内容
下载资源
问答
  • Vue打包自动部署到指定服务器

    Vue打包并自动部署到指定服务器

    安装依赖

    npm install shelljs --save-dev 
    npm install scp2 --save-dev 
    npm install chalk --save-dev 
    npm install ssh2 --save-dev 
    npm install cross-env --save-dev 
    

    配置备用环境变量

    在根目录下创建.env.development文件,并添加环境变量

    VUE_APP_SERVER_ID = 0
    

    在根目录下创建.env.production文件,并添加环境变量

    VUE_APP_SERVER_ID = 1
    

    创建自动化部署脚本

    package.json同级目录下创建文件夹deploy

    deploy文件下创建config.jsservers.jsindex.js

    servers.js:配置服务器相关信息

    /*
    * name:自定义名称
    * domain:域名
    * host:ip
    * port:端口
    * username:服务器账号
    * password:服务器密码
    * path:发布到服务器的指定路径
    */
    const servers = [
        {
            value: 0,
            name: 'xxx',
            domain: 'xxx',
            host: 'xxx',
            port: 'xxx',
            username: 'xxx',
            password: 'xxx',
            path: 'xxxx'
          },
          {
            value: 1,
            name: 'xxx',
            domain: 'xxx',
            host: 'xxx',
            port: 'xxx',
            username: 'xxx',
            password: 'xxx',
            path: 'xxxx'
          }
    ]
    
    module.exports = {
        servers:servers
    }
    

    config.js:发布前的一些处理

    require('shelljs/global');
    const inquirer = require('inquirer');
    //发布的服务器列表
    const ser = require('./servers');
    const SERVER_LIST = ser.servers;
    
    inquirer.prompt([{
      name: 'conform',
      message: `是否需要重新构建?`,
      type: 'list',
      default: 0,
      choices: [{name: '是',value: 1}, {name: '否',value: 0}]
    },{
      name: 'choose',
      message: `选择发布的环境`,
      type: 'list',
      default: 0,
      choices: SERVER_LIST
    }]).then(function (answers) {
        process.env.VUE_APP_SERVER_ID = answers.choose;
        if(answers.choose == 99){
            console.log('取消构建');
            return;
        }
      let cmd = answers.conform ? 'npm run build && node ./deploy' : 'node ./deploy';
      exec(cmd);
    })
    

    index.js:发布到服务器的处理逻辑

    require('shelljs/global');
    
    const ora = require('ora');
    const chalk = require('chalk');
    const scpClient = require('scp2');
    
    //发布的服务器列表
    const ser = require('./servers');
    const serverInfo = ser.servers[process.env.VUE_APP_SERVER_ID||0];
    if(!serverInfo){
      return
    }
    
    var Client = require('ssh2').Client;
    var conn = new Client();
    conn.on('ready', function() {
      console.log('Client :: ready');
      conn.exec('rm -rf '+ serverInfo.path, function(err,stream){
        if (err) throw err;
        stream
          .on('close', function(code, signal) {
            // 在执行shell命令后,把开始上传部署项目代码放到这里面
            const spinner = ora('准备发布服务器...');
            spinner.start();
            console.log(chalk.green('开始发布\n'));
            scpClient.scp(
                'dist/',
                {
                  host: serverInfo.host,
                  port: serverInfo.port,
                  username: serverInfo.username,
                  password: serverInfo.password,
                  path: serverInfo.path
                },
                function (err) {
                    spinner.stop();
                    if (err) {
                    console.log(chalk.red('发布失败.\n'));
                    throw err;
                    } else {
                    console.log(chalk.green('Success! 成功发布到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试') + '服务器! \n'));
                    }
                }
            );
            conn.end();
        })
        .on('data', function(data) {
            console.log('STDOUT: ' + data);
        })
        .stderr.on('data', function(data) {
            console.log('STDERR: ' + data);
        });
      })
    })
    .on('error', (err) => {
     console.log(err)
    })
    .on('end', () => {
     console.log('end')
    })
    .on('close', () => {
     console.log('close')
    })
    .connect({
      host: serverInfo.host,
      port: serverInfo.port,
      username: serverInfo.username,
      password: serverInfo.password,
      readyTimeout:5000
    });
    

    添加package.json中的scripts命令

    "scripts": {
        "deploy": "node ./deploy",
        "config": "node ./deploy/config.js"
    }
    

    效果如下

    在这里插入图片描述

    展开全文
  • 所需工具:Jenkins、svn、rsync、nodejs、ansible(可选)背景需求:当前存在多个项目,使用的是同一套Vue代码,每个项目的配置文件不同,所以前端在打包时需要手动替换配置文件,这样就产生了额外的工作量,为了解决...

    所需工具:Jenkins、svn、rsync、nodejs、ansible(可选)

    背景需求:当前存在多个项目,使用的是同一套Vue代码,每个项目的配置文件不同,所以前端在打包时需要手动替换配置文件,这样就产生了额外的工作量,为了解决此问题,所以决定通过Jenkins来打包并自动替换配置文件

    当前系统环境:Centos7

    1、安装Jenkins

    2、安装nodejs

    3、安装Subversion插件

    因为我这里是通过svn来管理代码,所以我这需要安装svn插件,如果你是用git,自行安装git插件,原理上都一样的。

    登陆Jenkins,Manage Jenkins→Manage Plugins→Available查找Subversion,勾选进行安装

    4、创建新的项目

    在Jenkins左边点击,创建新的项目,自定义名称,然后选择自由风格

    5、配置Subversion

    本地已存在svn代码库,并且Vue代码已经上传到对应的svn目录中

    Repository URL:对应Vue代码位置

    Credentials:添加svn用户(该用户拥有读权限即可)

    注意:如果是nginx代理的Jenkins,添加用户可能会出现不成功

    6、配置打包shell

    在Build中选择Execute shell,输入打包命令

    npm install

    npm run build

    1

    2

    npminstall

    npmrunbuild

    保存后,可以先进行一次构建

    7、修改配置文件

    不同的项目使用不同的配置文件,我这里的做法是将不同项目的配置文件上传到Centos7(即当前部署Jenkins的机器)指定的目录中,然后在Execute shell添加一行cp命令,在每次打包前都替换配置,即每个项目都单独对应一个Jenkins构建

    \cp /root/prod.env.js /root/.jenkins/workspace/whsir_demo/config/

    1

    \cp/root/prod.env.js/root/.jenkins/workspace/whsir_demo/config/

    8、自动发布

    网上很多都是以ssh来做自动发布的,我个人很喜欢rsync神器(不接受反驳),所以我这里以rsync来同步到远程服务器。

    我这打包后生成的dist是在/root/.jenkins/workspace/whsir_demo/中,我们只需要将/root/.jenkins/workspace/whsir_demo/dist/目录同步到远程服务器即可。

    最后将写好的rsync脚本添加到Execute shell中,即可实现Vue自动打包部署到远程服务器

    rsync -azvP --delete --exclude=.svn --password-file=/root/mima /root/.jenkins/workspace/whsir_demo/dist whsir@10.10.10.10::demo

    1

    rsync-azvP--delete--exclude=.svn--password-file=/root/mima/root/.jenkins/workspace/whsir_demo/distwhsir@10.10.10.10::demo

    9、结语

    Jenkins通过Execute shell来执行shell脚本非常好用,如果远程服务器需要重启等操作可以借助ansible,并将ansible加入到Execute shell中。

    ~微信打赏~

    分享到:

    展开全文
  • “随着前后端分离项目的流行,vue项目开发部署也成为了前端人员必备技能;本文将带你学习vue项目...vue.config.js是一个可选的配置文件,如果项目的 (和package.json同级的) 根目录中存在这个文件,那么它会被自动加...

    “随着前后端分离项目的流行,vue项目开发部署也成为了前端人员必备技能;本文将带你学习vue项目部署及遇到的各种坑。”

    关于vue项目部署不得不提的是配置文件vue.config.js 。

    注:本文使用最新vue3.0版本,如果你使用的是vue2.0配置方式略有不同。

    vue.config.js是一个可选的配置文件,如果项目的 (和package.json同级的) 根目录中存在这个文件,那么它会被自动加载。

    // vue.config.jsmodule.exports = {// 选项...}

    01

    vue项目部署到根路径

    vue.config.js选项publicPath用于配置 "部署应用包时的基本 URL"。

    默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。

    也就是将项目部署到域名根路径的情况下选项publicPath使用默认值不用设置。

    module.exports = {// publicPath: '/', 部署项目到域名根路径的情况下选项publicPath不用设置。outputDir: 'dist', // 输出文件目录assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)...}

    以“雨果学院后台管理中心”项目为例,

    npm build 打包应用

    将编译包拷贝到nginx服务器html目录下

    目录:D:\nginx-1.17.7\html/disk50x.htmlindex.html

    3.  修改nginx配置文件nginx.config

    # D:\nginx-1.17.7\conf\nginx.confglocation / {#root   html;  原配置root html/dist; #修改后配置index  index.html index.htm;}

    4. 启动nginx服务

    项目效果如下:

    5. 遇到的问题

    我们知道vue单页应用有两种加载模式,一种是默认的hash模式, 一种是history 模式,为了美观起见正式上线的应用中都会使用history模式。

    在history模式下,当刷新浏览器时会出现404错误

    解决方法修改nginx.config文件,添加try_files $uri $uri/ /index.html;

    location / {root html/dist;index index.html index.htm;try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由}

    02

    项目部署到子路径

    默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用publicPath选项指定这个子路径。例如,如果你的应用被部署在https://www.my-app.com/my-app/,则设置publicPath为/my-app/。

    1. vue.config.js配置

    module.exports = {publicPath: '/my-app/', //访问子目录:http://www.my-app.com/myappoutputDir: 'dist', // 输出文件目录assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)}

    为了在开发环境方便测试一般如下配置

    module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',outputDir: 'my-app', // 输出文件目录assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)}

    2. 记得修改路径router.js

    const router = new VueRouter({mode: 'history', //使用history模式base: '/my-app/',//默认路径process.env.BASE_URL,routes})

    3. nginx.config配置

    location / {root html;index index.html index.htm;try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由}

    03

    centos部署nodejs项目

    1.下载Node.js安装包。

    wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz

    2.解压文件

    tar xvf node-v6.9.5-linux-x64.tar.xz

    3. 创建软链接,您就可以在任意目录下直接使用node和npm命令。

    ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/nodeln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

    4. 查看node、npm版本

    node -vnpm -v

    5. 为了让nodejs在后台运行我们需要安装forever插件

    全局安装forever

    npm install forever -g

    6. 进入项目目录,运行

    forever start ./bin/www

    7. 查看forever运行的项目

    forever list

    8. 停止服务

    forever stop 12528

    04

    总结

    本文介绍了vue项目在history模式下打包部署的过程及遇到的问题,然后介绍了nodejs后台项目在centos上的安装运行。关于vue项目部署网上有很多介绍,一些是在vue2.0基础上介绍的,大家在使用时一定小时。更多vue配置建议大家参考官方vue.config.js配置文档,很多问题都可以找到答案。比如关于publicPath相对路径配置问题官方描述:

    publicPath这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。相对 publicPath 的限制相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:当使用基于 HTML5 history.pushState 的路由时;当使用 pages 选项构建多页面应用时。

    展开全文
  • 主要介绍了浅谈Vue 自动部署打包上线,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 一、首先安装jenkins和gitLab(可自行百度查看如何安装jenkins和gitLab),并在jenkins所在服务器安装vue项目打包所需工具,包括node.js;vue-cli脚手架,webpack工具,还需在jenkins服务器安装git工具用于进行git...

    一、首先安装jenkins和gitLab(可自行百度查看如何安装jenkins和gitLab),并在jenkins所在服务器安装vue项目打包所需工具,包括node.js;vue-cli脚手架,webpack工具,还需在jenkins服务器安装git工具用于进行git项目下载。

    安装内容:

    1、vue部分:

    (1)Node.js(安装完成后检查node和npm版本是否已安装完成,命令node -v)

    (2)安装cnpm

    (命令:npm install -g cnpm --registry=http://registry.npm.taobao.org )

    (3)安装vue-cli;(命令:npm install -g @vue/cli)

    (4)安装webpack;(命令:cnpm install -g webpack)

    2、git部分:

    (1)下载git并安装,安装完成后在命令窗口中查看是否安装完成;

    (命令:git version;显示git版本即表示安装完成;)

     

    二、进行jenkins插件安装

    登录jenkins,系统管理-管理插件

     

    选择可选插件,在过滤中查询gitLab、nodejs、build等关键信息,下载并安装以下插件:

    GitLab Plugin ;

    Gitlab Hook Plugin ;

    NodeJS ;

    Build Authorization Token Root Plugin ;

    其中gitLab plugin用于jenkins连接gitLab项目,gitlab Hook plugin和Build Authorization Token

    Root Plugin用于进行gitLab变动后jenkins自动进行任务部署;NodeJs 用于jenkins进行vue项目打包;

     

    三、进行全局工具配置

    系统管理-全局工具配置

    1、git配置

    找到Git配置,在命令窗口中输入where git 返回的路径即为git安装地址,将该地址复制到Path to Git executable中(记得去除.exe后缀)

     

    2、NodeJs配置

    找到NodeJs,点击NodeJs安装

    别名自取,用于标识,version选择jenkins服务器中安装的nodeJs版本(可通过命令node -v进行查看,必须选择你安装的版本,不然打包时会出现错误)

     

    四、进行系统设置

    系统管理-系统设置中找到Gitlab,在此次添加gitLab许可证

    connection name 中添加标识名,gitlab host URL中添加gitlab服务器地址(例:若你使用的git项目地址是http://172.16.0.11:10086/njfgs/ptz/spcp-vue,则此处添加http://172.16.0.11:10086/),然后点击add添加按钮添加token;在弹出窗口中kind选择gitLab API token,API token中输入gitLab中获取的token api内容。

    gitLab中tokenApi获取方式:

    1、注册专用gitLab用户或使用已有用户(该用户需要拥有你需要打包项目的上传下载权限),然后点击用户设置,选择访问令牌

    姓名输入当前用户名,时间选择你允许jenkins连接gitLab的时间(如图即为允许jenkins连接gitLab知道2019年5月2日),然后勾选下方权限并点击create按钮

    完成后可获取到token,复制该值并粘贴到jenkins的配置中;点击add添加完成后在credentials中选择刚才添加的token,并点击test connection测试是否能够连接,若报错则根据报错信息进行相关配置修改。直至连接成功。

    五、进行项目正式配置

    新建一个自由风格的项目

    1、在源码管理中选择git,在下方配置repositories中url中输入你需要打包项目的gitlab路径(若jenkins服务器未安装git则会报错,若安装完成依旧报错先不处理,等先添加credentials后一般会自动消失),点击credentials后方add按钮,添加gitlab用户名密码用于进行项目下载上传

    添加后选择刚添加的用户

    在下方branches to build中输入你想下载打包的git分支,若为主线则不动默认,若为分支则改为你的分支;

     

    2、若需要gitLab项目有变动自动执行jenkins部署则进行该项配置,若不需要则跳过;

    选择构建触发器,选择Build when a change is pushed to GitLab;点击高级后allowed branches选择Allow all branches to trigger this job,点击下方secret token后方generate按钮,生成一串id

    复制该id,然后到gitLb,用拥有该项目设置权限用户登录,选择设置-导入所有仓库,在URL中输入下图红框中的路径,

    secret token中输入上面复制的生成的id,trigger中选择push events,记得取消选择enable ssl verification,然后点击add webhook;

    若出现错误提示url is blocked Requests to the local network are not allowed;即表示该gitlab无法向本地进行传输,需要用gitlab管理员用户配置权限,在用户设置中-outbound requests中选中allow requests to the local network from hooks and services

     

    修改完成后重新添加webhook,直到下方出现

    表示配置完成。

    3、若需要进行vue项目打包则进行本项配置,若不需要则跳过

    选中构建环境,选中Provide Node & npm bin/ folder to PATH ,下方NodeJS Installation选中之前在全局配置中配置的nodejs

    4、选中构建

    依次添加你需要的命令

    1、cd /d D:\jenkins\workspace\13SPCP_VUE

    (跳转到jenkins仓库中本项目路径中)

    2、npm run build

    (若该前端vue项目中尚无node-modules,则需先进行npm i 下载插件)

    (注:若需执行npm命令,则需要在上方构建环境中选择nodejs,及进行上方3号操作)

    3、cd /d D:\nginx-frp-19019\html

    if exist spcpVue rd spcpVue /s /q

    (跳转到nginx中,判断前端项目是否已存在,已存在删除;目的:为了进行前端项目打包后部署)

    4、XCOPY D:\jenkins\workspace\13SPCP_VUE\dist/E D:\nginx-frp-19019\html\spcpVue\

    (将build完后的dist包复制到nginx中html中,其中 /E表示复制文件夹下方所有内容包括空文件夹)

     

    自此,配置完成!

    展开全文
  • 上次给CI环境搭建好了,这次写了一个脚本用于服务端打包部署使用,解决了前端需要频繁打包的问题,即时将代码推到工程库,服务端自动打包作发布,然后测试人员即时测试,尽早发现问题。 发布原理: 我没有通过软链的...
  • 一、首先安装jenkins和gitLab(可自行百度查看如何安装jenkins和gitLab),并在jenkins所在服务器安装vue项目打包所需工具,包括node.js;vue-cli脚手架,webpack工具,还需在jenkins服务器安装git工具用于进行git...
  • 6、最后在package.json文件夹下添加下面的命令 “build-re”: “vue-cli-service build && node ./delect-qiniu.js && node ./refresh-qiniu-CDN.js”, 然后运行一下npm run build-re就可以了,他会自动打包生成新...
  • vue 的history 模式是很有必要的,可以删掉路径中的# 号,尤其是做微信开发,微信那边会自动把#给除掉。所以一般都设置成history的模式。但设置成history 的模式,会导致很多问题。 最近我就碰到一个这样的问题:如...
  • 流程:jenkins关联码云仓库,点击立即构建,执行shell进行构建,打包,把打包后的dist目录文件放到服务器上,完成自动打包部署。一.服务器安装 Javajenkins是运行在java环境中的,所以要先安装java,配置java环境变量后...
  • vue-cli3.0会自动将js和css分开打包,所以我们需要做的就是将css不要分割打包. 在vue.config.js中配置 css:{extract: false,sourceMap:false}
  • vue-cli项目根目录新建run_bulid.js文件 安装依赖 npm i compressing ssh2 --save-dev run_bulid.js const {exec} = require('child_process'); const compressing = require('compressing'); const ...
  • 【Jenkins自动部署Vue服务自动打包构建

    千次阅读 多人点赞 2020-09-08 18:10:33
    Jenkins 系列会从 Ubuntu的服务端部署、 Linux节点的Python服务自动化构建、 Windows节点Python服务自动化构建、 Vue服务自动化构建、 监控服务自动化构建、 用户权限控制 几个方面进行介绍
  • 1. 环境准备 npm install scp2 --save-dev npm i --save-dev cross-env 2. 配置文件 2.1. 在项目根目录下创建 deploy/...build:stage 命令是以开发环境进行打包生成静态资源,deploy:stage 命令是以开发环境打包+部署
  • Vue项目打包部署到Tomcat

    千次阅读 2019-05-10 16:23:55
    通常在开发环境下请求后台接口会用到反向代理,而在生产环境中反向代理是不生效的,那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作,更改配置文件去自动切换接口地址。 开发环境:在...
  • java.lang.OutOfMemoryError: Java heap spaceat com.jcraft.jzlib.Deflate.deflateInit(Deflate.java:1384)at com.jcraft.jzlib.Deflate.deflateInit(Deflate.java:1326)at com.jcraft.jzlib.Deflater.init(Deflate...
  • 上次给CI环境搭建好了,这次写了一个脚本用于服务端打包部署使用,解决了前端需要频繁打包的问题,即时将代码推到工程库,服务端自动打包作发布,然后测试人员即时测试,尽早发现问题。 发布原理: 我没有通过软链...
  • ps: 一篇很好的自动部署教程,为了方便,拿到这里记录保存一下,方便以后使用1. JENKINS 是什么Jenkins是一个自包含的、开源的自动化服务器,可以用于自动化与构建、测试、交付或部署软件相关的各种任务。Jenkins...
  • 一、前言1、本文主要内容将在项目中实际使用到的相关东西整理记录一波,同时可以方便其他同学在使用到的时候参考一下(自己也备忘),有不对的地方,欢迎指出~~记录下如何使用Jenkins自动打包部署Vue前端应用(对于...
  • # Given files /oss.js 3、对vue.config.js 进行配置 const WebpackAliyunOss = require("webpack-aliyun-oss"); // 引入webpack-aliyun-oss const Oss = require('./oss'); // 引入刚刚创建的oss.js文件 module....
  • vue自动部署

    2021-01-27 10:46:45
    一、安装scp2 npm install scp2 --save-dev 二、根目录创建upload.js,和package.json平级 ...client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX', // ...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 284
精华内容 113
关键字:

vue打包自动部署

vue 订阅