详解vue项目打包后通过百度的BAE发布到网上的流程


Posted in Javascript onMarch 05, 2018

经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上。虽然接口方面还有一下问题但是自己还是很高兴的。

首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE。

继续编辑终于将自己写的JSON文件模拟的数据也传上去了。

具体的步骤:

1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目)

详解vue项目打包后通过百度的BAE发布到网上的流程 

2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜。自己玩很划算。

详细的的步骤在https://cloud.baidu.com/doc/BAE/QuickGuide.html上面都有介绍,我用的GIT版本管理工具。一定要选择nodejs0.10.21-web这个类型。因为我们用的express框架。根据步骤创建好自己的库以后。先自己熟悉一下他的配置文档。

3,在自己创建的库里面将espress安装上去,具体的步骤自己度娘。(npm install -g express-generator 这个命令一定要有,要不然可能提示express命令找不到)

接下来就是重头戏了,虽然很简单,但是我研究了半天。

(1)先将git管理的这个文件里三个文件,除了app.conf全部删掉,然后将创建的express项目中的文件复制出来放到git 管理的那个库里面,git管理的库的文件名基本上是test1\appid245yn4jb32这个样子的。test1是我创建的文件夹,appid245yn4jb32这个文件夹是git远程克隆下来的。将express创建的项目中的文件,包括依赖全部复制到appid245yn4jb32文件夹下面。同时将bin文件夹里面的www文件加上js后缀。因为这个BAE只识别.js的入口文件。同时将www文件中的端口改为18080.   因为BAE的默认端口为18080。

详解vue项目打包后通过百度的BAE发布到网上的流程详解vue项目打包后通过百度的BAE发布到网上的流程

(2)将vue项目中打包好的项目(dist文件夹下面的所有文件)复制到public文件夹下面,将它原来的删掉。

这样将所有文件上传 ,打开网站,应该就可以看到vue项目中的东西了。(不过是没有数据的样子)

总结

以上所述是小编给大家介绍的详解vue项目打包后通过百度的BAE发布到网上的流程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅谈JavaScript字符串与数组
Jun 03 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
BootStrap中的表单大全
Sep 07 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
jQuery文字轮播特效
Feb 12 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 #Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 #Javascript
axios拦截设置和错误处理方法
Mar 05 #Javascript
完美解决axios在ie下的兼容性问题
Mar 05 #Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 #Javascript
You might like
coreseek 搜索英文的问题详解
2013/06/08 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
javascript 写类方式之八
2009/07/05 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Vue点击切换颜色的方法
2018/09/13 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python实现定时提取实时日志程序
2018/06/22 Python
python ---lambda匿名函数介绍
2019/03/13 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
决心书标准格式
2014/03/11 职场文书
护士辞职信怎么写
2015/02/27 职场文书
员工考勤管理制度
2015/08/06 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis