vue、react打包app

Vue打包app

本地打包测试

1.http-server是一个基于node.js的简单的，零配置的命令行http服务器。
安装：npm install http-server -g
使用：http-server [path] [options]

2.npm run dev （或npm start）。
让项目通过localhost和ip都可以访问（若项目localhost可以访问，IP不能访问，那就去修改 config/index.js 里面的 host: ‘localhost’ 为 host: ‘0.0.0.0’）。

3.npm run build，生成dist目录。
不管之前有没有修改打包配置都不影响dist被http-server访问（以下是没有打包配置的项目）。

4.在dist下输入http-server -c 10，通过生成的地址访问项目。
要注意端口号，使用的是项目的端口号。

使用hbuilder打包测试

1.在hbuilder里新建一个移动App的项目，选择空模板，填写项目名，语法选择ES5/ES6均可。

2.项目里的manifest.json文件保留，其余全部删除，然后把dist里面的东西全拷进去。

3.首先，要保证index.html可以在浏览器里运行起来(验证项目基于hbuilder本身的一个服务器可不可以运行)。

没有进行打包配置是不能成功访问项目的，都是引入资源路径问题。

4.进行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打包

1.manifest.json配置

1）配置应用名称、应用描述、应用版本、appID（appID是登录以后自动获取的，不用管）。

2）配置应用logo，选择自动生成所以图标并替换。

3）配置启动图片，不同尺寸需要不同的图片，让UI做图，如果不配置此项，那就是默认hbuilder的启动图片。

4） sdk、模块权限、引用关系、代码视图、…，不需要管。

2.发起云打包，没有ios证书，只能使用android的公用证书
发行 > 原生app云打包：包名一般是倒着写域名，打包

3.打包完成后，点击下载链接就可以下载webapp。

安装在手机后的一些问题

1.iconfont没有显示
这是因为，web是http协议，而手机不是http协议。在使用到iconfont的地方，url加上http协议：

2.为了缩小app的大小，dist/static/js里面的以 .map 结尾的文件都可以删除。

React打包app

react写好js后

1、在package.json 里改相对路径 “homepage”:"./" //避免打包build后空白页

2、运行npm run build

3、生成build文件

4、试运行build里的index.html，看看是否有自己写好的内容，如果是空白，检查一下package.json是否配置好，或者其他原因

5、运用Hbuild打包为App（先删除原本的manifest.json)

下载Hbuild,百度网址 https://pc.qq.com/detail/3/detail_22603.html

5.1 找到工具栏的文件 => 打开目录 => 导入react 项目名目录

5.2 点击右键 “转化成移动App"，无法截图，请见谅

5.2 生成manifest.json 文件

5.3 双击manifest.json文件看看index.html 入口是否正确

再看模板权限配置 => 已选模板是否有模板，有的话就删除

5.4 找到工具栏的发行==》发行为原生安装包，文件夹不能有中文
5.5 等待打包并下载成功