精华内容
下载资源
问答
  • 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"
    }
    

    效果如下

    在这里插入图片描述

    展开全文
  • 主要介绍了浅谈Vue 自动部署打包上线,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue项目部署之二:Vue项目打包部署andnginx配置vue打包linux服务器部署 vue打包 vue项目具体配置此处不详细描述,vue.config.js配置好后,在终端输入以下命令 npm run build 生成一个dist文件,目录如下 linux...

    vue打包

    vue项目具体配置此处不详细描述,vue.config.js配置好后,在终端输入以下命令

    npm run build
    

    生成一个dist文件,目录如下
    在这里插入图片描述

    linux服务器部署

    上一章已讲述在Linux服务器上配置nginx环境。具体可见vue项目部署之一:Linux服务器安装Nginx

    1. 上传项目文件

    将打包好的dist文件上传至云服务器,我常用路径是在nginx目录下的html文件夹内。

    /usr/local/nginx/html/dist (dist可按自己需要更换文件名)

    2. 修改安全组和防火墙

    1. 阿里云安全组开放
      将9090端口打开,此时还可以将YApi需要隐射的端口同时打开。
      在这里插入图片描述
    2. 服务器防火墙端口开放
      修改防火墙配置文件
      centos7以下版本使用iptables
    vi /etc/sysconfig/iptables
    
    新增端口命令
    -A INPUT -m state --state NEW -m tcp -p tcp --dport 9090 -j ACCEPT
    
    保存文件命令  :wq
    
    重启防火墙
    systemctl start firewalld.service
    

    centos7以上版本使用firewalld

    添加端口命令
    firewall-cmd --zone=public --add-port=端口号/tcp --permanent
    重启服务
    systemctl restart firewalld
    查看服务列表
    firewall-cmd --list-ports
    
    其他命令
    开启服务   systemctl start firewallds
    关闭服务   systemctl stop firewallds
    

    3. 修改nginx配置文件

    1、进入nginx配置文件

    vim /usr/local/nginx/conf/nginx.conf
    此处若不知道服务器nginx.conf位置可使用命令: find / -name nginx.conf
    

    2、修改nginx配置文件中serve内容,具体如下:

    server {
            listen       8080;   //映射端口号  
            server_name  localhost;   //服务器ip地址或者域名
    
            root   /usr/local/nginx/html/zhsnGw;     //打包资源存放位置
            location / {
                index  index.html index.htm;
            }
        }
    

    4. 重启nginx服务

    • 1、先验证nginx配置文件是否正确
      方法一:进入nginx安装目录sbin下,输入命令./nginx -t

    正确显示:
    nginx.conf syntax is ok
    nginx.conf test is successful

    方法二:在启动命令-c前加-t

    /usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
    
    • 2、重启Nginx服务
      进入nginx可执行目录sbin下,输入命令./nginx -s reload
    [root@Serve sbin]./nginx -s reload
    

    5. 访问浏览器

    浏览器地址栏输入服务器ip+端口号访问。

    展开全文
  • 一、首先安装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表示复制文件夹下方所有内容包括空文件夹)

     

    自此,配置完成!

    展开全文
  • vue打包部署到tomcat

    2019-10-09 15:43:53
    每个月一次的技术文档是一个总结的过程,今天就来讲讲我最近遇到的vue项目打包部署到服务端的注意事项及步骤。 1我们用vue-cli脚手架建一个项目之后,在本地测试都没有问题,但是直接用npm run...

    每个月一次的技术文档是一个总结的过程,今天就来讲讲我最近遇到的vue项目打包部署到服务端的注意事项及步骤。

     1我们用vue-cli脚手架建一个项目之后,在本地测试都没有问题,但是直接用npm run build打包,访问基本都是有问题,比如:页面出现空白现象,获取资源路径不对等,我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题,我也遇到过,那现在我们就来一一解决这样的问题。

    出现的问题:

    打包到服务器后,出现资源引用路径的问题

    打包到服务器后,出现空白页的问题

    打包到服务器后,出现引入的csstype被拦截转换为"text/plain"问题

    打包到服务器后,出现路由刷新404的问题

    此时我们需要以下几步

    1配置服务端地址

    有一个很尴尬的问题就是config/prod.env.js目录中要配置服务端的地址,我在网上搜了很多都没有提到这一步,我只配置了dev.env.js中的地址BASE_API:'"http://192.168.1.144:8081"',之前一直读取的是本地的开发环境,我一直在想从哪里获取呢,后来在prod.env.js配置后发现会打包后会自动读取路径。

    这两个文件有什么不同呢?Dev.env.js是本地开发环境中会调用的服务端配置地址,但是prod.env.js是打包时会自动读取里面的服务端地址,先知道了有什么不同,才会了解为什么在这里面配置

    2修改configindex.js的配置

    修改build:{}中内容,assetsPublicPath: '/ywyun/',// '/' '

    首先build是打包时会读取的模块,该这里是打包时会自动加一个文件夹名为ywyun,因为我们打包后悔变成index.htmldist文件夹,这两个东西部署的时候肯定是要放在一个文件夹内,至于这个文件夹文字是什么,根据你们自己的项目名字或者路径来定义。

    这个解决的是出现资源引用路径的问题。

    3出现由于前面项目加了个基目录,ywyn,访问出现404的问题

    今天做的应用发布到服务器上,发现当刷新当前路由的时候,就会出现404的状况,其实这是因为当刷新当前页面时候,所需要访问的资源在服务器上找不到,也就是说,我们在Vue发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了history模式。解决方案是在router/index.js下加一个base路径,因为在部署的时候有一个文件夹,这个文件夹相当于一个基目录,路由没有这一层的话会报错,

    export default new Router({
      mode: 'history',
      base:'/ywyun/',
      routes: constantRourerMap
    })

    4页面刷新时出现404问题

    此时访问页面应该基本的都可以跳转,但是刷新的时候突然发现报了404,这个在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释

    根据官方给出的解决方案原理

    你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

    所以在tomcat服务器下你可以这么做。在打包好的项目根目录下新建一个WEB-INF文件夹,在WEB-INF中写一个web.xml。

    <?xml version="1.0" encoding="UTF-8"?>

    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

      xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee

               http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

      version="3.1" metadata-complete="true">

      <display-name>Router for Tomcat</display-name>

      <error-page>

        <error-code>404</error-code>

        <location>/index.html</location>

      </error-page>

    </web-app>

    这样的目的就是一旦出现404就返回到 index.html 页面。

     

    以上所述是给大家介绍的Vue项目webpack打包部署到Tomcat或者阿里云服务器遇到的一系列问题,基本上这几个点改了,在本地用tomcat试一下,然后可以直接上传到阿里云上部署测试了。

     


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • 添加自动部署命令 在package.json的scripts的末尾添加 "upload": "node upload.js", "pub": "npm run build && npm run upload" 4. 运行命令,自动打包部署 npm run pub 控制台输出 “ 项目发布完毕! ” 时,即部署...
  • 上次给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项目打包部署到Tomcat

    万次阅读 2019-05-10 16:23:55
    通常在开发环境下请求后台接口会用到反向代理,而在生产环境中反向代理是不生效的,那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作,更改配置文件去自动切换接口地址。 开发环境:在...
  • 1.引入阿里云 webpack-aliyun-oss yarn add webpack-aliyun-oss -D 2.根目录新建oss.config.js并配置如下 module.exports = { region: '你的oss服务器区域', accessKeyId: '你的...3.vue.config.js中配置打包
  • Vue项目打包部署到GitHub Pages

    千次阅读 2020-07-04 21:49:14
    Vue项目打包部署到GitHub Pages 前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再赘述,初学者可以通过搜索找到大量文章教程。本文重点在于: 如何将vue项目...
  • vue项目打包部署生产环境

    千次阅读 2019-05-16 11:58:00
    vue项目打包部署生产环境 打包部署生产环境之前需要修改配置文件: 修改一:build > utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 修改二:config > index.js(修改...
  • 建立vue项目-》General-》源码管理-》build-》构件后操作-》验证,下面逐一进行分析。 二、新建vue项目 输入任务名称,选择【构建一个vue项目】 三、项目配置 1、General配置 进行简单的描述,其他可根据项目实际...
  • Vue项目打包部署后首页空白的问题

    千次阅读 2020-01-21 12:23:19
    在进行项目开发的时候,用Vue进行项目框架的搭建并开发,开发完成时需要部署到客户现场,通过命令 npm run build 将项目打包,然后上传至服务器的tomcat目录下,然后通过地址访问时发现,系统首页加载空白。 在...
  • vue-cli项目根目录新建run_bulid.js文件 安装依赖 npm i compressing ssh2 --save-dev run_bulid.js const {exec} = require('child_process'); const compressing = require('compressing'); const ...
  • vue 的history 模式是很有必要的,可以删掉路径中的# 号,尤其是做微信开发,微信那边会自动把#给除掉。所以一般都设置成history的模式。但设置成history 的模式,会导致很多问题。 最近我就碰到一个这样的问题:如...
  • vue-cli3.0会自动将js和css分开打包,所以我们需要做的就是将css不要分割打包. 在vue.config.js中配置 css:{extract: false,sourceMap:false}
  • SpringBoot+Vue项目打包部署

    千次阅读 2020-06-13 20:08:31
    演示项目是SpringBoot+VUE前后端分离的。需要分别部署前端、后端项目,做集群的话需要将后端项目部署到多台服务器中。 使用的技术及服务器: – Linux系统:Centos7 – 前端:VUE+Nginx – 后端:SpringBoot+JDK...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,858
精华内容 3,543
关键字:

vue打包自动部署

vue 订阅