vueApp打包
本地打包测试
- http-server是一个基于node.js的简单的,零配置的命令行http服务器。
安装:npm install http-server -g
使用:http-server [path] [options] - npm run dev (或npm start)。
让项目通过localhost和ip都可以访问(若项目localhost可以访问,IP不能访问,那就去修改 config/index.js 里面的 host: 'localhost' 为 host: '0.0.0.0')。 - npm run build,生成dist目录。
不管之前有没有修改打包配置都不影响dist被http-server访问(以下是没有打包配置的项目)。 -
在dist下输入http-server -c 10,通过生成的地址访问项目。
要注意端口号,使用的是项目的端口号。
使用hbuilder打包测试
-
在hbuilder里新建一个移动App的项目,选择空模板,填写项目名,语法选择ES5/ES6均可。
-
项目里的manifest.json文件保留,其余全部删除,然后把dist里面的东西全拷进去。
-
首先,要保证index.html可以在浏览器里运行起来(验证项目基于hbuilder本身的一个服务器可不可以运行)。
没有进行打包配置是不能成功访问项目的,都是引入资源路径问题。 -
进行build配置
1)根目录下config/index.js找到里面build下面的assetsPublicPath:'/',把它改成assetsPublicPath:'./'(或assetsPublicPath:'')。
配置完成后,通过hbuilder在浏览器就可以运行跳转了。但可能有一些静态图片资源访问不到(如果图片资源转化为了base64就不会出现这种问题)
2)解决静态图片资源访问不到的问题。
注:写web项目,静态资源(图片、音/视频)还是存放在static目录下比较好。
解决方案一:修改静态资源路径( 这个方法我猜的,我测试成功)
根目录下/build/utils.js里面加一句代码约47-55行位置,publicPath:'../../'。看图:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 这句就是加的代码,不要找错位置
})
} else {
return ['vue-style-loader'].concat(loaders)
}
解决方案二:base64
根目录/build/webpack.base.conf.js文件,修改打包时base64的控制范围,打包时候尽量改大。
hbuilder打包
-
manifest.json配置
1) 配置应用名称、应用描述、应用版本、appID(appID是登录以后自动获取的,不用管)。
2) 配置应用logo,选择自动生成所以图标并替换。
3) 配置启动图片,不同尺寸需要不同的图片,让UI做图,如果不配置此项,那就是默认hbuilder的启动图片。
4) sdk、模块权限、引用关系、代码视图、......,不需要管。
-
发起云打包,没有ios证书,只能使用android的公用证书
发行 > 原生app云打包:包名一般是倒着写域名,打包
-
打包完成后,点击下载链接就可以下载webapp。
安装在手机后的一些问题
-
iconfont没有显示
这是因为,web是http协议,而手机不是http协议。在使用到iconfont的地方,url加上http协议:
-
为了缩小app的大小,dist/static/js里面的以 .map 结尾的文件都可以删除。
作者:chan_it
链接:https://www.jianshu.com/p/e327eca486db
来源:简书
原文地址:https://www.cnblogs.com/dinggf/p/11718955.html
- 小程序-实现竖排文字
- 【深度学习量化投资】RNNs在股票价格预测的应用基于Keras
- 关于webview调用js出现has no method 'toString'
- 深入学习Apache Spark和TensorFlow
- 搭建 WPF 上的 UI 自动化测试框架
- ttf设置文字字体
- R语言构建追涨杀跌量化交易模型(附源代码)
- Apache Spark中使用DataFrame的统计和数学函数
- android进程 清理及activity栈管理
- 机器学习模型的变量评估和选择基于技术指标『深度解析』
- Picasso and Android-Universal-Image-Loader缓存框架
- 解决ListView嵌套ListView遇到的问题
- 《OEA - 实体扩展属性系统 - 设计方案说明书》
- webview与js的相互交互
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何通过容器搭建稳定可靠的私有网盘(NextCloud)
- 初识ABP vNext(1):开篇计划&基础知识
- 基于 HTML5 Canvas 的病毒模拟视觉试验台
- #云开发高阶实战任务总结# 投票系统的解析与设计
- K8S 环境下的使用 ConfigMap 进行远程配置
- 腾讯云语音识别python-sdk使用笔记
- TKE部署ES如何配置参数vm.max_map_count
- Jquery validate remote 验证数据唯一
- MySQL 案例:乱码,字符集与错入错出的 MySQL
- Jenkins常用插件Copy Artifact的使用
- 聊聊dubbo-go的roundRobinLoadBalance
- 腾讯云录音文件识别请求和结果查询
- 【Kubernetes】kubectl top 如何使用
- js数组方法,常用数组Api的基本使用
- java jsp实现网络考试系统(mysql)