标签分类
技术文章
当前位置:主页 > 计算机编程 > vue.js > vue项目打包后通过百度的BAE发布到网上流程

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

  • 发布时间:
  • 作者:码农之家原创
  • 点击:146

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

这篇文章主要知识点是关于vue,项目打包发布,vue项目打包后通过百度的BAE发布到网上流程,Vue cli构建及项目打包以及出现的问题解决 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue企业开发实战
  • 类型:Vue.js实战大小:109.6 MB格式:PDF出版:人民邮电出版社作者:肖睿
立即下载

更多相关的学习资源可以参阅 移动开发电子书、等栏目。

经过两天的研究终于将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发布到网上的流程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

Vue cli构建及项目打包以及出现的问题解决

1. 首先安装node,推荐偶数版本;好了之后检查一下: node -v;出现版本好即为安装成功;win10家庭版本的msi版本的时候出现无法打开,更别说安装,可以自行百度;

2.nmp install vue-cli -g; ----->>vue -V;出现版本号就是安装成功了;

3.cd 到指定目录; vue init webpack 项目名称; 一些提示信息一一不说了;安装成功之后会有提示:一般按照他的提示步骤就可以了,cd 项目文件夹,

npm install(这个是安装 packjson.json的依赖,非常重要) , 最后运行 npm run dev; 会自动在8080端口打开网页,那么环境这一步是成功了;

4.介绍一下几个非常中重要的文件(夹):
config目录下的index.js是配置,node_modules下全部都是所要依赖模块的文件夹;src是本地资源;比如我们要编写的文件;其中main.js是入口文件;

5.下面介绍模块化引入vue文件,好记性不如烂笔头:

项目目录部分:

Vue cli构建及项目打包以及出现的问题解决

比如要在App.vue中引入其他模块;

importcomponentA @/components/componentA //下图ruter-view标签仅仅表示显示,有组件不一定能够显示,必须要router-view一下;当前app.vue为默认根模块;

Vue cli构建及项目打包以及出现的问题解决

在Banana中应该这样: <一个标准的vue文件应该包括 下面三种大类的标签> 其中name属性必不可少;

Vue cli构建及项目打包以及出现的问题解决

注意了:这里面的不需要声明一个 变量=new Vue({ }) 之类的,这个文件本身就代表一个实例了,在export default 内中 其实就是一个 vue字面量对象的描述,可以这样认为;

关于路由传参数:(以下是main.js), 这里有一个坑;

Vue cli构建及项目打包以及出现的问题解决

用 webpack vue-cli 自动构建项目后, 注意路由模块,是放在main.js下,还是放在router文件下的index.js

废话少说: 这里关键是正确引入路由,正确配置路由(构建路由对象),每一个路由给他一个name属性方便使用路由,在者,路由传参中, path 最后的冒号可以写可以不写,前提是(以下是组件 componentA):

<router-link>中 params:{}这个对象中写了, 写与不写的区别就是 不写 在url地址栏中显示或者不显示; 但是在子组件中用 $router.params都可以找到;

Vue cli构建及项目打包以及出现的问题解决

以下为Apple子组件: 也可取出来 {{$route.params.color}}

Vue cli构建及项目打包以及出现的问题解决

如何在项目中使用第三个库呢?

比如使用jquery,首先也是 npm install jquery@3.2.1 ;

在main.js(入口文件)import jquery from 'jquery'; 然后在一个组件中使用的时候 import jquery from "jquery"; 这样jquery就是全局变量了;

也可这样:比如使用百度的echarts库: 在main.js引入:

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

在使用的时候就直接是 this.$echarts了,this指的是vue实例;

项目完成后用 npm run build可以打包项目; 打包配置在config文件夹下的 index.js 的 build对象下;如需在本里预览,assetsPublicPath: './',改成相对路径; 如果你的css文件中引用了background相对路径,那么在打包后预览后是会出现资源找不到的情况的;可以在build文件夹的utils.js下:新增这个publicPath这个属性;

Vue cli构建及项目打包以及出现的问题解决

下面具体讲一下History模式:

 1、 为什么要开启?

首先,你的网站首页,域名后跟着一个大大的#,太难看了!跟开发他美丽帅气的程序汪完全不搭。

其次,官网上人家尤大大说了:“ history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。”

怎么理解呢?举个常见的场景说,就是如果你开发的是手机端应用,你从主页点击进去新闻列表,此时你看完新闻,想要回到首页,按以前的想法,那就是一个href重新打开首页呀。然后首页重新加载js,向服务器请求新闻列表,等等这些初始化的工作,都要重新做一次。对于用户而言,这个过程慢、费流量,用户体验其实是不好的。

而html的history模式,就能够让你从新闻详情页跳转到首页,不需要再次进行数据的初始化了。当然,这可能需要配合vuex来进行了。

 2、 在哪儿开启?

在你的实例化Router的时候配置开启即可:

const routers = new VueRouter({
 routes: router,
 mode: 'history'

})

上述就是目前遇到的一些基本问题;希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到vue项目中使用md5加密以及、 解决axios.interceptors.respon、 儿童python编程入门书籍推、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:Vue.js修饰符知识点详解

下一篇:Vue2.0使用过程常见的问题及解决方法

展开 +

收起 -

学习笔记
网友NO.621823

vue如何自动化打包测试环境和正式环境的dist/test文件

使用vue现在已经差不多2年了,想起来两年前的一次和某阿里处理的技术大牛(当时我们的技术总监)一起开发一个SPA项目的时候被硬着头皮去解决的一个难题,因为技术老大是阿里出身的,所以很多东西都是比较倾向于自动化,从项目ui设计到项目管理,到打包测试,到发布全部都要求我们要实现自动化,尽可能的减少手动操作。 当时技术大佬要求的事在jenkins进行一键打包,就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包,刚刚接触vue的我摸不着头脑,老大给了我一天时间研究这个玩意,没办法,只好硬着头皮做,后来想想改造一下,也比较简单。 Step1、package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。 Step2、在在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改一些参数 这样就多了个test环境 Step3、在build文件夹中新建webpack.test.conf.js,内容可以直接拷贝同目录webpack.prod.conf.js内容,修改一些参数。 这样构建时就会去config文件夹下的test.env.js寻找环境变量。 Step4、在config下创建test.js文件 Step5、在封装的axios.js的文件夹下创建config.js Step6、在封装的axios引入config.js 封装的get 和post请求 Step7、在config文件下的index增加test模块(可复制build)并更改相应的参数。……

网友NO.730093

详解vue静态资源打包中的坑与解决方案

本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用的js,css等文件服务器响应均为404,查看引入的资源路径如下: http://ip:port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css http://ip:port/static/js/app.815851e87b083afb82bf.js 2、分析 由上可以看出是资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析。 3、解决 在打包时需要使用相对路径来处理静态资源,更改build中资源发布路径配置(config/index.js, build对象): 将 assetsPublicPath: '/' 改为 assetsPublicPath: './', 再次打包,并将资源部署到特定路径下,然后访问: 此时index.html可以正常访问,同时js和css资源也可以正常访问,但是css中引入的assets目录下的大图片资源出错了(服务端404) 4. 再分析 查看引入的图片资源路径如下: http://ip:port/public/springActivity/static/css/static/img/question_bg.61a2825.png 实际项目中资源路径如下: in……

网友NO.963854

解决Vue 项目打包后favicon无法正常显示的问题

在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon。 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径。 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存在问题。 (很抱歉的说,写到这里才发现我目前并没有解决本地无法添加favicon的问题,只是解决了打包后的问题) 项目打包后的文件会因为配置的不同出现多种情况。下面给出原因分析及一种可以的配置方式。 各种配置下出错原因: 经webpack打包后的Vue文件一般会出现两种变化: 1、文件被打包进各种js、css文件中 2、文件被拷贝进static目录下(处在项目根目录的static文件下),具体在何位置与原始路径有关 如果图片被压缩进js、css文件中就就不好办,所以下面将图片直接放在static文件下。 一种正确的配置方式: 1、图片在项目中的具体放置位置 2、打包后图片所在位置 3、根据生成后的图片路径配置index.html中favicon路径 link type="favicon" rel="shortcut icon" href="./static/favicon.ico" rel="……

网友NO.507235

vue打包相关细节整理(小结)

项目在dev环境下运行没有问题,打包之后就各种报错一下来整理一下遇到的问题 1、打包好的网页无法访问static目录的资源 原因是下载官方的cli时,默认设置是根据绝对路径来定位资源目录的,这样就非常方便在dev环境下进行本地调试,但是在打包部署之后,就需要通过相对路径来访问静态资源了,修改方法很简单,在config/index.js文件文件中,定位到 把assetsPublicPath的value改成‘./',修改之后,打包生成的文件,对资源的引用路径会在路径前面加上‘./',这样就可以找到对应的资源文件了 2、可以找到静态资源文件,但是在css文件中的引用的资源并没有找到 原因是打包的时候,所有static文件下的资源都是加工,生成文件名加上hashcode为新命名的文件,例如css文件中引用了ttf(字体文件),由于ttf文件在打包之后加工成xxx+hashcode.ttf文件,原本的css文件的引用当然会找不到加工后的ttf文件。 解决的方法就是通过修改build/util.js文件的 ,添加publicPath:‘../../' 我们会发现打包后的css文件,对ttf文件的引用路径自动加上了hashcode,完美解决css引用外部资源失效的问题 3、图片,MP4,字体等资源比较大,超过限制,导致文件没有被打包进去,可以通过\build\webpack.base.conf.js , 修改对文件的大小限制 4、打包后,css样式和测试环境的不一样……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明