一·项目编译

1·进入项目目录下的终端执行命令

npm run build

正常情况如下图,如遇到错误不会编译成功,且编译后的html文件不能正常渲染。

2·编译完成后进入项目下的dist目录运行生成的index.html文件

打开以后f12出现以下错误(资源文件未找到)

打开项目中的index.js文件修改build
里的assetsPublicPath属性为空即可

重新打开index.html发现项目背景图片未找到

去css文件里找到未找到的文件名,进行搜索login_bg.162737a.png

修改资源文件为相应img png图片的相对路径../img/login_bg.162737a.png

二·项目部署

1·项目使用 Apache http server作为启动容器

2·环境搭建:

1.安装Apache主程序httpd:【yum install httpd】

2·启动/sbin/service httpd start

3·项目目录cd /var/www/html

4·程序目录/etc/httpd

3·默认使用80端口,如需修改其他端口请

修改配置文件 Listen 80  为指定端口

/etc/httpd/conf/httpd.conf

4·把前端页面放置在/var/www/html下,如放在根目录那就是服务器ip:端口进行访问

如在www目录下新建目录如ump
那就是服务器ip:端口+/ump进行访问

5·若无修改Apache http server
配置文件 需要,正常前端程序部署无需重启Apache http server服务。

原文地址:https://blog.csdn.net/b376924098/article/details/78726710

【Vue】基于nodejs的vue项目打包编译部署的更多相关文章

  1. React项目打包并部署到 Github 展示预览效果

    React项目打包并部署到 Github 展示预览效果 当开发者模式结束,准备打包的时进行以下步骤: 在package.json配置文件中加一句: "homepage": &quo ...

  2. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  3. 基于.net core实现项目自动编译、并生成nuget包

    近期想对自己的项目增加自动编译并生成nuget包,网上资料不少.但总还有迷糊的时候.首先:此解决方案包含多种版本的项目,如:有编译必须是x86平台,以及还有传统的.net foramework项目,以 ...

  4. 项目打包 tomcat部署

    IDE: IDEA 1.项目maven管理先执行 clean,再执行 compile 2.如果编译compile不成功,则将 C:\Users\Administrator\.m2\repository ...

  5. 基于node-webkit的web项目打包方案

    下载node-webkit https://github.com/rogerwang/node-webkit 找到Downloads这一小节,然后下载对应平台的node-webkit预编译包.(为了介 ...

  6. 项目打包 weblogic部署

    工作流打包:   由于没有集成单点,配置文件要修改 将webnocas.xml内容复制覆盖 web.xml   到这里修改完毕 选择weblogic项目,右键maven install,生成.ear文 ...

  7. 基于Maven的SpringBoot项目实现热部署的两种方式

    转载:http://blog.csdn.net/tengxing007/article/details/72675168 前言 JRebel是JavaEE中比较流行的热部署插件,可快速实现热部署,节省 ...

  8. idea maven项目打包并部署到tomcat

    打包 打开Maven管理器,邮寄package,执行Run Maven Build,执行成功后将war包生成到target目录下. 部署 1.将war包复制到tomcat安装目录下的webapps目录 ...

  9. Eclipse中创建新的SpringBoot项目(打包并且部署到tomcat)

    Spring-boot因为其对jar包的高度集成以及简化服务配置,快速部署等的优点,逐渐成为Java开发人员的热衷的框架.下面演示一下怎么在Eclipse中新建Spring-boot项目以及打包部署. ...

随机推荐

  1. Javascript-随滚轮匀速滑动的浮动广告窗动画

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. web前端学习(二)html学习笔记部分(2)-- 改良的元素(input元素等等)

    1.2.5  HTML5 改良的 input 元素的种类 1.2.5.1  新增的input元素种类中的改良与增加 input 元素的种类 (1) 新增的input元素种类中的url类型.email类 ...

  3. 【JZOJ4161】于神之怒 莫比乌斯反演

    任务 答案mod 1e9+7. 解法 容易写出反演: Ans=∑T=1nTk∗∑i=1⌊nT⌋⌊niT⌋⌊miT⌋μ(i) ∑⌊nT⌋i=1⌊niT⌋⌊miT⌋μ(i)这个因式显然是经典的分块处理: ...

  4. FZU 1575 小学生的游戏【模拟二分】

    某天,无聊的小斌叫上几个同学玩游戏,其中有比较笨的小兴,比较傻的小雪,可爱的小霞和自以为是的小楠.他们去找聪明的小明去给他们当裁判.判定谁取得游戏胜利. 而这个游戏是由小斌想个1到10000000的数 ...

  5. BZOJ 4817数点涂色题解

    题目链接 考试考了一道类似的题目,然后不争气的挂掉了,于是跑过来学习这道题的解法... 我还是太菜了.... 我们可以发现任意时刻,原树中颜色相同的点的集合一定是一条链, 即上面这种状态,而这种结构是 ...

  6. word之图表目录中点号位置提升3磅

  7. 【JZOJ3886】【长郡NOIP2014模拟10.22】道路维护

    CCC 最近徆多人投诉说C国的道路破损程度太大,以至亍无法通行 C国的政府徆重视这件事,但是最近财政有点紧,丌可能将所有的道路都进行维护,所以他们决定按照下述方案进行维护 将C国抽象成一个无向图,定义 ...

  8. PyCharm2019 永久激活

    <!-- 2019激活码 2019-06-21新更新 --> D00F1BDTGF-eyJsaWNlbnNlSWQiOiJEMDBGMUJEVEdGIiwibGljZW5zZWVOYW1l ...

  9. Ubuntu16.04安装Caffe最全最详细教程(CPU)

    转载请附上本文链接:https://www.cnblogs.com/acgoto/p/11570188.html 一.前言 为了安装caffe,本人已经在centos7.x上试错了1次,目前弃疗~:在 ...

  10. 2019-1-29-jekyll-如何加密博客-防止抓取

    title author date CreateTime categories jekyll 如何加密博客 防止抓取 lindexi 2019-01-29 16:26:17 +0800 2018-2- ...