zoukankan      html  css  js  c++  java
  • 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,通过生成的地址访问项目。
      要注意端口号,使用的是项目的端口号。


       
      图片.png

    使用hbuilder打包测试

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

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


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

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


       
      图片.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的控制范围,打包时候尽量改大。

     
    图片.png

    hbuilder打包

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


       
      图片.png

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

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


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

    安装在手机后的一些问题

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


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

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

  • 相关阅读:
    洛谷 P1226 【模板】快速幂||取余运算 题解
    洛谷 P2678 跳石头 题解
    洛谷 P2615 神奇的幻方 题解
    洛谷 P1083 借教室 题解
    洛谷 P1076 寻宝 题解
    洛谷 UVA10298 Power Strings 题解
    洛谷 P3375 【模板】KMP字符串匹配 题解
    Kafka Shell基本命令
    Mybatis与Hibernate的详细对比
    MyBatis简介
  • 原文地址:https://www.cnblogs.com/dinggf/p/11718955.html
Copyright © 2011-2022 走看看