精华内容
下载资源
问答
  • 一、用IDEA打包vue项目 HD_CSPWH_CiTOS\cspwh-citos-isp-client文件中作如下修改: 1.build/utils.js修改为: if (options.extract) { //loaders.push(MiniCssExtractPlugin.loader) loaders.push({ loader: ...

    一、用IDEA打包vue项目

    1、打包前 :前端项目文件中作如下修改:

    (1)build/utils.js修改为:

    if (options.extract) {
          //loaders.push(MiniCssExtractPlugin.loader)
          loaders.push({
            loader: MiniCssExtractPlugin.loader,
            options: {publicPath:'../../'} //解决打包后背景图或者图片显示不出来的问题
          })
        } else {
          loaders.push('vue-style-loader')
        }

    (2)config/index.js配置:

     build: {
        // Template for index.html
        index: path.resolve(__dirname, '../../cspwh-citos-isp-server/src/main/resources/static/index.html'), //此处路径修改为自己对应的vue后端项目
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../../cspwh-citos-isp-server/src/main/resources/static'),
        assetsSubDirectory: 'static',
    
        assetsPublicPath: './',
    }

    2、打包(按照第二种方式配置后,以后打包直接点击就可以):

    第一种方式:命令行(注意参考链接中的命令替换成:npm run build:prod )参考https://blog.csdn.net/u011010220/article/details/111253623

    第二种方式:

    3、执行打包操作后即可自动生成文件到对应的后端里

    4.在vue后端项目中执行mvn cleanmvn install即可生成jar包,直接运行jar包后,访问后端项目配置的端口就可看到自己项目界面。

    注意:该访问方式只适用于vue后端是spring boot的情况

    二、vue项目发布

    将jar包拷到服务器上进行发布

    展开全文
  • 主要介绍了部署vue+Springboot前后端分离项目的步骤实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 2、打包 使用maven命令打包mvn clean package 使用Xftp将产生的jar包上传到服务器相关目录,我的放到了/usr/server/yuyun里面 3、运行 第一种方法 使用Xshell进入服务器目录,进行如下操作 cd /usr/server/yuyun //...

    后端SpringBoot项目

    1、数据库

    将数据库备份一份到服务器或虚拟机上,然后修改项目的数据库连接路径,使其可以正常访问

    2、打包

    使用maven命令打包mvn clean package
    在这里插入图片描述

    使用Xftp将产生的jar包上传到服务器相关目录,我的放到了/usr/server/yuyun里面

    3、运行

    第一种方法

    使用Xshell进入服务器目录,进行如下操作

    cd /usr/server/yuyun
    // 为所有文件添加访问权限
    chmod 777 * .
    //运行yuyun-0.0.1-SNAPSHOT.jar并将控制台输出内容打印进catalina.log文件
    nohup java -jar yuyun-0.0.1-SNAPSHOT.jar > ./catalina.log &
    //实时输出文件内容
    tail -f catalina.log
    

    在这里插入图片描述

    第二种方法:

    新建一个文件catalina.sh,文件后缀为.sh,里面的内容如下:

    #!/bin/bash
    #这里可替换为你自己的执行程序
    APP_NAME=yuyun-0.0.1-SNAPSHOT.jar
    #使用说明,用来提示输入参数
    usage() {
        echo "Usage: sh 执行脚本.sh [start|stop|restart|status]"
        exit 1
    }
    #检查程序是否在运行
    is_exist(){
      pid=`ps -ef|grep $APP_NAME|grep -v grep|awk '{print $2}' `
      #如果不存在返回1,存在返回0     
      if [ -z "${pid}" ]; then
       return 1
      else
        return 0
      fi
    }
    #启动方法
    start(){
      is_exist
      if [ $? -eq "0" ]; then
        echo "${APP_NAME} is already running. pid=${pid} ."
      else
           BUILD_ID=dontKillMe
        nohup java -jar $APP_NAME > ./catalina.log &
      fi
    }
    #停止方法
    stop(){
      is_exist
      if [ $? -eq "0" ]; then
        kill -9 $pid
      else
        echo "${APP_NAME} is not running"
      fi  
    }
    #输出运行状态
    status(){
      is_exist
      if [ $? -eq "0" ]; then
        echo "${APP_NAME} is running. Pid is ${pid}"
      else
        echo "${APP_NAME} is NOT running."
      fi
    }
    #重启
    restart(){
      stop
      start
    }
    #根据输入参数,选择执行对应方法,不输入则执行使用说明
    case "$1" in
      "start")
        start
        ;;
      "stop")
        stop
        ;;
      "status")
        status
        ;;
      "restart")
        restart
        ;;
      *)
        usage
        ;;
    esac
    

    然后将其上传到服务器,跟jar包放在一个目录下
    然后执行下面的命令:

    cd /usr/server/yuyun
    // 为所有文件添加访问权限
    chmod 777 * .
    //直接运行catalina.sh文件
    ./catalina.sh start
    //实时输出文件内容
    tail -f catalina.log
    

    在这里插入图片描述
    后台就部署完成了
    如果要停止运行,直接使用命令./catalina.sh stop
    重启项目:./catalina.sh restart

    记得关闭防火墙

    4、项目后台使用域名访问

    这里用到了nginx:Linux云服务器安装nginx方法

    域名解析
    在这里插入图片描述

    进入nginx目录,编辑nginx配置

    cd /etc/nginx
    vi nginx.conf
    

    将下面的代码放在里面

    server {
        listen       80;
        server_name  serveryuyun.heyunhui.top;
    
        location / {
                proxy_pass http://127.0.0.1:8082;
        }
    }
    

    保存后使用命令重启nginx使配置生效

    service nginx restart
    

    使用浏览器访问http://serveryuyun.heyunhui.top/,访问成功
    在这里插入图片描述

    前端Vue项目

    1、修改后台访问路径

    打开vue项目,将访问后台的路径改为刚才配置的域名
    在这里插入图片描述
    然后运行项目,看是否正常访问前端页面

    可以正常访问后打包vue项目

    2、打包vue项目

    npm run build:prod
    

    每个项目打包命令不一样,如果没用,自行百度

    打包后的文件在dis目录下
    在这里插入图片描述

    3、上传到服务器

    在放后端代码的目录下再新建一个目录存放前端代码
    在这里插入图片描述

    4、配置nginx

    先进行域名解析

    server {
            listen       80;
            listen       [::]:80;
            //前端访问域名
            server_name  yuyun.heyunhui.top;
            //前端代码存放位置
            root         /usr/server/yuyun/client;
    
            # Load configuration files for the default server block.
            include /etc/nginx/default.d/*.conf;
    
            location / {
            	//前端代码存放位置
                root   /usr/server/ruoyi_vue/client;
                //前端首页文件
                index  index.html index.htm;
                try_files $uri $uri/ /index.html?$args;
            }
    
            location /prod-api/{
                    proxy_set_header Host $http_host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header REMOTE-HOST $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    // 跨域到后台访问端口
                    proxy_pass http://localhost:8082/;
            }
    
            error_page 404 /404.html;
                location = /40x.html {
            }
    
            error_page 500 502 503 504 /50x.html;
                location = /50x.html {
            }
        }
    

    然后重启nginx,再用浏览器访问http://yuyun.heyunhui.top/就出现结果了
    在这里插入图片描述

    展开全文
  • vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后生成的纯静态文件,甚至可以不经过服务器,所以通过后端弄跳转之类的都不太优雅,本文即介绍此类场景的微
  • 一、打包前端项目 打开前端项目,使用npm run build命令进行打包打包成功后结果如下 这时,该项目目录下有一个build目录是打包好的文件 将该目录下的所有文件复制到后端Springboot项目的resources/static...

    一、打包前端项目

    打开前端项目,使用npm run build命令进行打包,打包成功后结果如下

    在这里插入图片描述

    这时,该项目目录下有一个build目录是打包好的文件

    在这里插入图片描述

    将该目录下的所有文件复制到后端Springboot项目resources/static目录下

    在这里插入图片描述

    二、打包后端项目

    在右侧的maven视图中点击clean,然后点击install,对后端项目进行打包

    在这里插入图片描述

    打包好后再target目录下会有一个jar包

    在这里插入图片描述

    三、部署

    复制jar包到指定目录,打开cmd命令行界面,进入到该目录,使用java -jar xxx.jar命令运行jar包,就可以部署成功了

    展开全文
  • 使用Nginx的一些记录前后端分离,使用Nginx,Nginx的配置如下我把vue打包的文件(dist文件夹中的static和index文件直接拷贝到Nginx的HTML文件夹中,所以root可以直接默认,不用写,当然可以在location中加一个root ...

    使用Nginx的一些记录

    前后端分离,使用Nginx,Nginx的配置如下


    我把vue打包的文件(dist文件夹中的static和index文件直接拷贝到Nginx的HTML文件夹中,所以root可以直接默认,不用写,当然可以在location中加一个root 然后跟上你要指定的文件夹名称也是可以的)proxy_pass则是反向代理的设置,对应你的后台访问api接口。感觉它具有自动填充的功能,这个用的时候,打架肯定可以体会到。

    另外,我的vue打包部署之后出现了空白页,全部的空白页,而资源文件可以完整的加载。纳闷啊。。。。

    后来发现是

    是的就是config文件夹下的index文件中的build的assetsPublicPath 。这个设置选项。它对应的是,你的dist中的文件放在那。如果你放的是在服务器的一个文件夹中,那这个就得加上这个文件夹名,如果不是,那就是这样。

    开发真的不难啊,,,,找问题的时间远比花在其他部分多多了。。。。。

    希望可以帮到有同样问题的人,少走点弯路!

    展开全文
  • 文章目录前言一、环境准备二、SpringBoot项目打jar包1.1 使用Maven的...Java企业开发少不了Spring Boot 加 Vue,在如今大街小巷都遍布的前后端分离项目标配,已经成为公司开发必不可少的技术,最近小编开源了一个关于RB
  • 基于spring boot和vue前后端分离的外卖系统 包含完整的手机,后台管理功能 技术选型 核心框架:Spring Boot 数据库层:Spring data jpa/Spring data mongodb 数据库连接池:Druid 缓存:Ehcache 前端:Vue.js ...
  • 前后端分离打包、运行 一、本地打包运行 在终端中运行程序 前端: 前提:已安装npm,编译环境为VS Code 1、跳转至Vue项目所在目录 $ cd Vue项目所在的目录 2、打包Vue文件,打包完成后会在当前目录下产生dist目录 $ ...
  • 此次部署项目是我亲身经历,而且是一次性部署成功,没有部署超过两次甚至多次的情况,过程虽然很艰难,但结果还是很满意的,我希望大家用心去部署这个项目,你会发现部署这个项目其实不难
  • Spring Boot + Vue前后端分离项目,Maven自动打包整合

    千次阅读 多人点赞 2019-09-30 11:26:11
    现在各类项目为了降低项目、服务模块间的高度耦合性,提出了“前后端分离”,而前后端分离的项目该如何打包呢? 一般的做法是前端项目打包完,将打包文件手动复制到后端项目工程的src\main\resources\static目录...
  • vue +springboot前后端分离项目(微调过一个大神的项目)mall,本人使用腾讯云,亲自打包并且配置nginx mysql 进行发布,并有详细的发布安装文档
  • 步骤实现 1、编写未对接数据库的前端代码 2、对接查询商品列表接口 3、对接删除商品接口 4、对接增加商品接口 5、对接修改商品接口 6、index.html 完整代码 0xFF 总结 00x0 目标 搭建SSM框架,并且能够打通前后端,...
  • 起因:看过Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,我早想这样玩玩了。 1. 建立个maven父项目 next 这个作为父工程,next Finish,然后把项目目录的...
  • 因为前后端分离部署,如果把后台链接服务配置在项目里面,则每次都需要部署,现如今用如下的方法进行配置,前端只需要关心代码,打包一次搞定,每次运维只需要修改配置文件即可。 static下面的文件在每次打包的时候...
  • 今天小编就为大家分享一篇Vue前后端不同端口的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue_project/src/App.vue <template> <el-row type="flex" justify="center"> <el-col :xs="24" :sm="22" :md="20" :lg="20" :xl="18"> <router-view/> </el-col> </el-row&...
  • 如果管理页面是以根目录形式访问,那这里就不需要配置了,直接编译打包部署到nginx就可以了,但要加项目名的形式就需要部分修改了 假设管理页面项目名:admin 后端项目名:pro-api 修改文件.env.production //如果...
  • vue前后端分离入门案例 1、最近一直再学习springboot的相关内容,感觉暂时不想学了,就上网随便搜搜,看到大家都在讨论的前后端分离,出于好奇,今天也来玩玩。 2、玩前后端分离,有一个前提条件,后端的也就是...
  • 手把手Django+Vue前后端分离开发入门(附demo)

    千次阅读 多人点赞 2020-08-04 16:29:19
    前言 众所周知,Django对于网站快速开发非常友好,这得益于框架为我们做了很多事情,让我们只...所以,本文希望通过一个简单的demo,讲一讲基于Django+Vue前后端分离开发,将Django作为一个纯后的服务,为前端V
  • 文章目录 一、部署 Spring Boot 项目 1、在服务器上部署数据库 2、连接阿里云数据库 3、项目上传并运行 二、部署 Vue 项目 三、配置 Nginx 基于 Spring Boot + Vue前后端分离项目的部署方式主要有如下两种: 前后...
  • 前后端分离(Spring Boot 整合VUE打包部署服务器 一. 打包Vue项目 1. build目录下的utils.js添加 publicPath: ‘…/…/’(否则打包后项目图标可能显示不出来) 2.config目录下index.js里assetsPublicPath: ‘/’...
  • vue前后端分离项目部署至云服务器 个人博客地址congz666.gitee.io 所需工具 Docker Nginx Portainer 阿里云服务器 阿里云容器镜像服务 1、docker打包代码并推向阿里云仓库 前端准备 先执行npm run build 打包代码...
  • 首先,既然选择了boot2.0+vue前后端分离了,为啥还要打成一个war进行部署呢,因为小作坊没有住专门的运维人员,我们这很多时候都是开发人员直接维护,那么打成war的话会比较方便后期的维护 1、vue打包 本人主攻...
  • Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现。 vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html 我自己在网上找了2个接口做测试: CSDN:...
  • 上篇文章为大家讲述了Spring Boot + Vue前后端分离(三)实现登录功能;本篇文章接着上篇内容继续为大家介绍前端路由和前后合并启动,当然前后合并这种方式不建议在正式部署的时候使用,一般前后分开部署不同...
  • 公司的项目是前后端分离的,后端用spring套装,前端用vue,是两个项目,最终部署时,需要把vue打的包dist文件夹的内容放到webapps目录下,然后后端项目再用maven命令打成war包。 以前的过程是这样的: 进入前端项目...
  • 最近在利用空闲的时间学习springboot+Vue前后端分离相关知识,然后动手写了个后台管理系统,实现登录验证、学生模块、英雄联盟模块、数据可视化(暂未开发,准备使用echarts进行);这边先以英雄联盟模块为例介绍,...
  • 基于laravel和vue前后端分离设计

    热门讨论 2021-04-30 09:48:37
    前言 最近需要搭建一个前后端分离的项目,前端当然就使用常见的框架Vue的脚手架,关于Vue脚手架的安装可以参考之前的博客。后端采用php中的laravel框架,号称最受欢迎的框架,确实相比其他php的框架,在github上的...
  • 前后端分离项目,前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue + php 项目为例。直接上 server 模块的 nginx 配置。 server { listen 80; #listen [::]:80 default_server ipv6only=on;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,970
精华内容 2,788
关键字:

vue前后端分离打包发布

vue 订阅