Vue Cli 3.0打包生成app

最新推荐文章于 2024-08-08 10:50:24 发布
最新推荐文章于 2024-08-08 10:50:24 发布
阅读量3.4k 收藏 5
点赞数 2
分类专栏： app 文章标签： app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinale_wenhua/article/details/88542232
版权

1、vue cli 3.0创建新工程，添加依赖mint-ui

说明: https://img-blog.csdnimg.cn/2019031321272882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoaW5hbGVfd2VuaHVh,size_16,color_FFFFFF,t_70 ​

2、项目配置中，公共路径设置为./，（注意，这一步非常重要，否则打包后项目找不到项目中文件）

说明: https://img-blog.csdnimg.cn/20190313212913375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoaW5hbGVfd2VuaHVh,size_16,color_FFFFFF,t_70 

修改保存后，可以看到vue.config.js文件中，publicPath如下图

3、在HBuider中打开目录，路径为工程的dist。选中工程，右键菜单选择“转换成移动App”，然后工程的标识就变成了‘A’,

4、选择发行—>云打包-打原生安装包—>打包

5、生成得到apk文件

小伙子_china
关注
专栏目录
vue-cli3.0配置及使用注意事项详解
10-18
Vue-cli3.0在打包后的文件中，对引用资源注入了预加载（preload/prefetch）技术，有利于资源加载的优化。同时，当启用PWA插件时，会注入manifest和icon链接，并引入webpack的runtime和chunkmanifest清单，以获得最佳...
Vue-cli3打包成 APP的那些坑
爱上丶童话
09-15 356
一、打开APP白屏 1、vue项目在打包前修改根目录下的 vue.config.js 文件 2、在router.js中把mode:“history”,这行代码注释掉 二、单击 手机返回键退出应用的bug。（可以直接把这段代码放到你vue项目中的index.html，重新打包，再放回来，也可以直接修改这个index.html） 代码如下： <script> document.addEventListener('plusready', function(a) { //等待plus ready后
vue项目打包成apk全过程，以使用APICloud为例
cuicuiniu521的博客
07-05 1396
APP页面的开发过程跟我们平时开发一样，利用 vue 把页面全部完成，最后进行 npm run build 将项目打包。接下来就是 apicloud 打包的过程，首先我们要去 apicloud 官网下载开发者工具-APICloud Studio 3，我下载是下面这款：​编辑切换为居中添加图片注释，不超过 140 字（可选）大家选择对应系统进行下载～接下来需要开发者注册 apicloud 账号～打开 APICloud Studio 3 软件，在顶部文件按钮中选择打开我们刚刚打包好的 dist 文件。然后我们继
学习Vue3.0，这一篇就够了
最新发布
on1yLX的博客
08-08 1545
ref 底层的本质其实还是 reactive，系统会自动根据我们给 ref 传入的值将它转换成 ref(xx) -> reactive({value: xx})其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间。由于 reactive 必须传递一个对象，所以导致在企业开发中，如果我们只想让某个变量实现响应式的时候会非常麻烦，如果是通过 shallowRef 创建数据，那么 Vue监听的是 .value 的变化，并不是第一层的变化。
vue-cli3打包成app
weixin_43257089的博客
07-13 371
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
vue3-vite-ts构建的项目转为app
hnn123456hnn的博客
01-28 656
vue3-vite-ts构建的项目转为app
一文带你使用Vue完成移动端(apk)项目
a10534126的博客
03-06 6284
我们项目使用的是Vue和Vant组件，详情都可以看官网哦 Vant Vue 完整项目视频链接 目录结构： 基本配置 入口文件main.js 首先做一个引入 我们的Vant UI组件是按需引入，而Element UI是全部引入 所以引用方式也不同 main.js完整代码 // 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './router
一份超级详细的Vue-cli3.0使用教程【推荐】
12-04
Vue-cli 3.0 提供了一个简单的命令行工具，允许开发者通过 `vue serve` 命令快速启动一个开发服务器，并且通过 `vue build` 命令打包项目。例如，你可以输入 `vue serve App.vue` 来启动一个服务，`vue build App....
基于VueCLI3快速生成Vue项目的初步封装组装或必要的零件开箱即用
08-12
"基于VueCLI3快速生成Vue项目的初步封装组装或必要的零件开箱即用"这个标题意味着我们将探讨如何利用Vue CLI 3快速构建项目，并对生成的项目进行初步的封装和定制，以便更好地满足开发需求。 首先，Vue CLI 3通过`...
修改Vue打包后的默认文件名操作
11-20
在Vue.js应用开发中，构建部署到生产环境时，通常会使用`vue-cli`或手动配置webpack进行打包。默认情况下，Vue CLI生成的项目在执行`npm run build`或者`yarn build`命令后，静态资源会被输出到一个名为`dist`的目录...
Vue3Boot:Vue3.0开发的项目
03-17
Vue3Boot是一个基于Vue.js 3.0框架开发的项目，Vue 3是Vue.js的最新版本，带来了许多性能优化和新特性。Vue.js是一个流行的前端JavaScript框架，它以其易用性、灵活性和高效的虚拟DOM管理而受到开发者们的喜爱。在...
【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
weixin_56995925的博客
02-25 1658
1、修改vue项目配置（下面的是基于脚手架3方式创建的项目的打包方式） 1.1打开cmd（管理员方式） 1.2输入 vue ui，进入脚手架管理界面 1.3点击配置进入配置界面 1.4修改公共路径为./ 1.5进入vue.config.js文件检查是否修改成功 2、运行npm run build进行vue项目打包 3、将打包生成的dist文件夹复制到hbuilderx里面 4、打开hbuilderX，新建一个5+App项目 5...
vue项目,打包成APP(用HBuilderX)
weixin_44088739的博客
06-12 6409
1、把vue项目打包，npm run build 2、HBuilderX新建项目,项目名为APP名 3、把vue项目整合到hbuilder上 第一种方法：static和index.html引入进来 第二种方法：把域名放进去，APP只是做了页面跳转 4、APP配置 应用名称和版本号修改 APP图标 先点浏览，再点自动生成所有图标并替换 APP启动页面 ...
html5+app（将vue打包成为APP遇到的问题）
qq_44538773的博客
04-02 2527
一、不存在跨域问题 HTML在打包成APP以后(经测试),在手机上可以实现跨域请求得到数据 然而在电脑上测试的时候,仍然存在跨域,因为跨域拦截是浏览器的行为. ...
vue项目打包APP
weixin_73676038的博客
06-28 330
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
Vue3学习之旅-之vue3组件化(一)---＞父子组件通信
听雨少年的博客
08-08 1672
文章目录Vue3组件化(一)-父子组件通信组件的嵌套认识组件的嵌套组件的拆分组件的通信组件的通信父子组件之间通信的方式父组件传递给子组件Props的数组用法Props的对象用法细节一：type类型细节二：对象类型的其他写法细节三：Prop 的大小写命名非Prop的Attribute禁用Attribute继承和多根节点子组件传递给父组件子组件传递给父组件自定义事件的流程自定义事件的参数和验证 vue3笔记 vue3学习之旅–邂逅vue3-了解认识Vue3 vue3学习之旅–邂逅vue3-了解认识Vue3(二)
Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
蒋川@卡拉云
05-30 1548
本文完整版：《Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP》 Vue3 Typescript + Axios 全栈开发教程前端 Vue3 Typescript 项目结构安装 Vue3 ，使用 npm 安装 Vue接着我们创建一个 Vue 的项目，运行命令：处理前端问题太麻烦？「新增 ToDo 组件」 - AddTodo.vue「ToDO 列表组件」 - TodoList.vue「 ToDo 内容更新组件」 - Todo.vue Vue3 的源码使用 Type.
前端VUE项目打包成安卓APP
Gabriel的专栏
08-18 4458
1.打包vue项目，在项目的根目录执行命令 npm run build,直至项目打包完成 打开dist文件件，里面有一个index.html和static文件夹。 2.新建cordova项目 2.1安装cordova，命令行执行 npm install -g cordova 2.2利用cordova创建一个新项目，命令行执行cordova create folkmusic com.music.folkmusic musicapp folkmusic是项目名称，com.music.folk.
Vue3 如何开发原生(安卓,ios)
夜栩的博客
07-04 2625
由于不同平台的设计规范和用户习惯不同，使用 Uniapp 开发的应用在不同平台上的用户体验可能存在差异。开发者需要针对每个平台进行特定的适配和调优，以提供更好的用户体验。Uniapp 尽可能提供了跨平台的组件和 API，但某些特定平台的功能和接口可能无法完全支持。在需要使用特定平台功能的情况下，可能需要使用原生开发或自定义插件来解决。有些平台特有的功能或界面设计可能无法完全实现，需要使用特定平台的原生开发方式来解决。在遇到问题时，可能难以找到完善的解决方案，开发者可能需要花费更多的时间和精力来解决问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值