vue-cli打包app(HBuilderX)

已于 2022-10-06 16:36:56 修改
阅读量555 收藏
点赞数
文章标签： javascript 前端
于 2022-10-06 16:08:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49645803/article/details/127184031
版权

注意1：vue-cli打包前，需要在vue.config.js中配置 publicPath: "./"

注意2：打包完成后，将html中script标签的type="module"去除

<script defer="defer" type="module" src="/js/chunk-vendors.e787bfa1.js"></script>

上述两点没做会分别导致

1. 创建5+app项目

 2.将新建的5+app项目中的文件夹(js/img/css)及html替换为vue-cli打包出来的dist中对应的文件

3.manifest.json中

 4.发行-原生app-云打包

 5.打包完成后会返回apk的本地路径

狠狠摆烂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【实战篇】基于vue-cli创建的项目进行打包优化
Equicy的博客
08-02 2350
一、前言 阅读完该文章大概需要2.5min。 读完该篇文章你能学到 vue-cli默认做了哪些优化？ 在cli的基础上我们又能做哪些优化？ vue.config.js中如何配置一些常用的plugin和loader vue-cli的出现，让我们省掉了配置webpack的时间。也就是说，一个不懂webpack的人，也能直接上手开发。比如file-loader, url-loader会提前为我们配置好。 性能方面，vue-cli也默认尽可能多的帮我们做了优化，比如cache-loader会在项目
vue-cli项目打包app
sunlizhen的专栏
05-29 680
一、准备项目 开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目 二、修改项目中的参数 1、将项目目录下config文件内index.js中assetsPublicPath修改为assetsPublicPath: './' 注意：在这个文件中，有两个assetsPublicPath，一个在dev中，一个在bulid中，我自己试的时候，同时修改，则打包成功的app显示未空白，只修改build中的assetsPublicPat...
vue-cli3打包成app
weixin_43257089的博客
07-13 344
1、安装mint-ui依赖 npm i mint-ui -S 2、在vue.config.js中设置公共路径 module.exports = { publicPath: './' } 3、在router.js中注释掉 mode: ‘history’, 4、如果使用到路由懒加载，则需要安装 syntax-dynamic-import插件 npm install --save-dev @babel/plugin-syntax-dynamic-import 安装之后 在 babel.config.j
Hbulid打包vue-cli项目生成APK
热门推荐
TimeSky
09-19 1万+
之前写过不少移动APP项目，但是平时写的Vue-cli项目都只在浏览器开发运行的，今天稍微写一下使用Hbulid打包Vue-cli项目生成APK的大致流程吧 1.准备已有的Vue-cli搭建的webAPP项目 确保 npm run dev 命令能正常运行确保项目正常运行、预览、无报错2.修改配置文件的生成路径 在项目的config文件夹中找到index.js文件在改文件中找到assetsPublic
使用HBuilderX快速搭建一个vue-cli项目
m0_69038398的博客
07-29 4869
右键点击components->新建->vue文件同理，创建Main组件。
HbuilderX配置vue-cli3
qq_32067695的博客
03-06 5226
vant文档 地址：https://youzan.github.io/vant/#/zh-CN/ HbuilderX新建vue项目 项目建立后目录结构如下： 打开HbuilderX终端，安装如下依赖包： npm install axios -save-dev // 处理http应用请求的包 npm i vant -S // van...
初试vue-cli使用HBuilderx打包app的坑
10-16
主要介绍了初试vue-cli使用HBuilderx打包app的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli或vue项目利用HBuilder打包成移动端app操作
11-20
1、首先我们先建立一个vue的项目，本人用的是vue-cli随便建立的，然后运行项目 二、修改路径 (assetsPublicPath: ‘./’) 1、 打开我们config中的js文件，修改assetsPublicPath的路径为”./”（下图的右下角位置） 2...
HBuilderX,uni-app
10-01
1. 创建项目：使用 HBuilderX 或 vue-cli 创建 uni-app 项目 2. 编写代码：编写 uni-app 项目的代码，包括页面、组件、API 等 3. 调试项目：使用 HBuilderX 或浏览器调试 uni-app 项目 4. 打包项目：使用 HBuilderX ...
HBuilderX项目配置使用uview
12-22
【HBuilderX项目配置使用uView】：这篇文章主要讲解如何在HBuilderX环境中配置和使用uView UI框架，这是一个专为uni-app生态设计的UI组件库。uni-app是一个基于Vue.js的多端开发框架，允许开发者用一套代码覆盖iOS、...
Vue Cli 3.0打包生成app
chinale_wenhua的博客
03-13 3464
1、vue cli 3.0创建新工程，添加依赖mint-ui ​ 2、项目配置中，公共路径设置为./，（注意，这一步非常重要，否则打包后项目找不到项目中文件） 修改保存后，可以看到vue.config.js文件中，publicPath如下图 3、在HBuider中打开目录，路径为工程的dist。选中工程，右键菜单选择“转换成移动App”，然后工程的标识就变成了‘A’, 4...
打包app vue php,vue-cli打包步骤详解
weixin_39856208的博客
03-11 110
这次给大家带来vue-cli打包步骤详解，vue-cli打包的注意事项有哪些，下面就是实战案例，一起来看一下。1、打包命令是npm run build，这个命令实际上是在package.json中，scripts中build所对应的命令；2、创建一个prod.server.js，这个文件不是必须的，这个文件的用处是在打包完毕之后，通过启动node.js本地服务来访问打包完成的静态文件，不需要的同学...
使用HBuilderX-普通项目之vue-cli默认项目开发前端（四）
D_lunar的博客
05-08 2406
第四步：学习并记录一些小知识 每走一步都会发现很多知识点不清楚不了解，为了避免再次遗忘，我打算全部记录下来。 一、import文件时@和.的用法和区别 导入文件时引用的是相对路径。 vue中，@ 等价于 src这个目录，@/指src/,可以参考文章《Vue中import引入模块路径时的@符号》； 但是在HbuilderX中，@被重定义了，@/ 指 根目录/； ./指当前目录，../指...
使用HBuilderX-普通项目之vue-cli默认项目开发前端（一）
D_lunar的博客
05-06 6432
第一步：新建一个vue-cli-demo项目 一、vue-cli-demo项目目录简介 1、node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件。 2、public这个目录也许可以顾名思义？ 3、src 这个目录下存放项目的源码，即开发者写的代码放在这里。 4、assets 目录用来存放属于该项目的资源文件，里面的文件会被webpa...
使用HBuilderX-普通项目之vue-cli默认项目开发前端（二）
D_lunar的博客
05-06 2512
第二步：使用element-ui和vue-router 一、安装element-ui Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。element-ui是饿了么前端团队推出的一款基于Vue.js 2.0的桌面端UI框架，手机端有对应框架是Mint UI（没有使用过）。 选中当前vue-cli-demo项...
把vue-cli脚手架打包成移动端5+app
daidaidaiqqq的博客
10-13 878
一、使用HbuildX，创建5+app项目 点击创建，项目创建成功，把下面除了manifest.json文件都可以删除 二、运行npm run build打包vue项目 vue项目打包成功后，会生成dist文件，找到该文件下的 static 和index.html 复制 static 和index.html 到创建好的5+app项目 三、连接真机，打开手机开发者模式，便可以真机调试了。 温馨提示： 1、若vue项目里面有需要访问api，则需要把ap...
vuecli打包组件 esmodule_Vuecli&ElementUI&项目线上部署发布
weixin_33216916的博客
02-03 1015
一、Vue-cli基本概念Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建安装Vue-cli步骤1.安装Node.js下载地址：https://nodejs.org/en/download/ node -...
uni-app 本地打包 ios app
NotBad_的博客
03-13 713
将下载的SDK包解压，里面有一个HBuilder-Hello文件夹，将这个文件夹单独拖出来（可以不拖出来，我为了清晰一点给它单独拖到桌面上），注意这个文件夹里包含了一个名为HBuilder-Hello.xcodeproj的文件，不要拖错了，文件夹里还有一个同名文件夹的。，在应用管理中选择要打包的这个应用，点击各平台信息，生成离线打包key，点击查看，复制APP Key，将其黏贴到dcloud_appkey一项中。按需选择配置项，建议选择测试手机的机型或全机型，然后一路next，最后export。
vite将vue3打包成非type=“module“的方式
Wangyuan_wo的博客
05-12 3411
公司的新需求，要将一个vue项目打包，丢进一个app里头，然后用iframe显示出来，结果前期一切正常，因为都是用苹果测的，后来试了一下安卓手机，发现打不开了，经过一番调试，最终发现是使用了module，引入的js文件压根就没有执行，最后经过一番折腾，改了一下打包方式，终于是解决了问题，在此做一下记录o(然后就ok了，大功告成！
uni-app\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\templateLoader.js:46:20
最新发布
01-09
根据提供的引用内容，你提到了一个文件路径：uni-app\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\templateLoader.js:46:20。这是一个文件路径，可能...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值