vueApp打包

本地打包测试

  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,通过生成的地址访问项目。
    要注意端口号,使用的是项目的端口号。


     
    vueApp打包
    图片.png

使用hbuilder打包测试

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

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


     
    vueApp打包
    图片.png
  3. 首先,要保证index.html可以在浏览器里运行起来(验证项目基于hbuilder本身的一个服务器可不可以运行)。
    没有进行打包配置是不能成功访问项目的,都是引入资源路径问题。

  4. 进行build配置
    1)根目录下config/index.js找到里面build下面的assetsPublicPath:‘/‘,把它改成assetsPublicPath:‘./‘(或assetsPublicPath:‘‘)。


     
    vueApp打包
    图片.png

    配置完成后,通过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的控制范围,打包时候尽量改大。

 
vueApp打包
图片.png

 


hbuilder打包

  1. manifest.json配置
    1) 配置应用名称、应用描述、应用版本、appID(appID是登录以后自动获取的,不用管)。


     
    vueApp打包
    图片.png

2) 配置应用logo,选择自动生成所以图标并替换。
3) 配置启动图片,不同尺寸需要不同的图片,让UI做图,如果不配置此项,那就是默认hbuilder的启动图片。
4) sdk、模块权限、引用关系、代码视图、......,不需要管。

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


     
    vueApp打包
    图片.png
  2. 打包完成后,点击下载链接就可以下载webapp。

安装在手机后的一些问题

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


     
    vueApp打包
    图片.png
  2. 为了缩小app的大小,dist/static/js里面的以 .map 结尾的文件都可以删除。

作者:chan_it
链接:https://www.jianshu.com/p/e327eca486db
来源:简书

vueApp打包

上一篇:0104 不可变基础设施 - PH


下一篇:双链表的算法之插入节点