vueApp打包

我会带着你远行 2023-07-23 06:00 16阅读 0赞

本地打包测试

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，通过生成的地址访问项目。  
    要注意端口号，使用的是项目的端口号。
    
     
    
    ![format_png][]
    
    图片.png

--------------------

使用hbuilder打包测试

1.  在hbuilder里新建一个移动App的项目，选择空模板，填写项目名，语法选择ES5/ES6均可。
2.  项目里的manifest.json文件保留，其余全部删除，然后把dist里面的东西全拷进去。
    
     
    
    ![format_png 1][]
    
    图片.png
3.  首先，要保证index.html可以在浏览器里运行起来(验证项目基于hbuilder本身的一个服务器可不可以运行)。  
    没有进行打包配置是不能成功访问项目的，都是引入资源路径问题。
4.  进行build配置  
    1）根目录下config/index.js找到里面build下面的assetsPublicPath:'/'，把它改成assetsPublicPath:'./'（或assetsPublicPath:''）。
    
     
    
    ![format_png 2][]
    
    图片.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的控制范围，打包时候尽量改大。

![format_png 3][]

图片.png

--------------------

hbuilder打包

1.  manifest.json配置  
    1） 配置应用名称、应用描述、应用版本、appID（appID是登录以后自动获取的，不用管）。
    
     
    
    ![format_png 4][]
    
    图片.png

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

1.  发起云打包，没有ios证书，只能使用android的公用证书  
    发行 > 原生app云打包：包名一般是倒着写域名，打包
    
     
    
    ![format_png 5][]
    
    图片.png
2.  打包完成后，点击下载链接就可以下载webapp。

安装在手机后的一些问题

1.  iconfont没有显示  
    这是因为，web是http协议，而手机不是http协议。在使用到iconfont的地方，url加上http协议：
    
     
    
    ![format_png 6][]
    
    图片.png
2.  为了缩小app的大小，dist/static/js里面的以 .map 结尾的文件都可以删除。

[http-server]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fhttp-server
[format_png]: /images/20230528/b80fe819b6aa443e98ffeb84b0be28c0.png
[format_png 1]: /images/20230528/59c0c1d522174cacbf866fc3070ba82b.png
[format_png 2]: /images/20230528/e7edaaa0bf99443faa2dbf349de10c3a.png
[format_png 3]: /images/20230528/cc878c4322c44dce98e49195e4f79c0b.png
[format_png 4]: /images/20230528/dda063423882413fa061ed345c8ad3d8.png
[format_png 5]: /images/20230528/d36b58f825df45e2a52cb31d67fffa57.png
[format_png 6]: /images/20230528/dbb7fc5d774f447daf73f2e50f56f6c8.png