详解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 相关文章推荐
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
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
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
JavaScript手机振动API
2016/06/11 Javascript
js实现交通灯效果
2017/01/13 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python实现经典排序算法的示例代码
2021/02/07 Python
经典婚礼主持开场白
2014/03/13 职场文书
老人祝寿主持词
2014/03/28 职场文书
战略合作协议书范本
2014/04/18 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
Python加密技术之RSA加密解密的实现
2022/04/08 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python