把vue-cli脚手架打包成移动端5+app

最新推荐文章于 2024-06-18 23:23:06 发布
最新推荐文章于 2024-06-18 23:23:06 发布
阅读量873 收藏 9
点赞数 1
分类专栏： vue HbuildX 文章标签： vue.js javascript vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daidaidaiqqq/article/details/120751305
版权

 一、使用HbuildX，创建5+app项目

点击创建，项目创建成功，把下面除了manifest.json文件都可以删除

 二、运行npm run build打包vue项目

 vue项目打包成功后，会生成dist文件，找到该文件下的 static 和index.html

 复制 static 和index.html 到创建好的5+app项目

三、连接真机，打开手机开发者模式，便可以真机调试了。 

温馨提示：

1、若vue项目里面有需要访问api，则需要把api换成具体地址，手机才能访问到api

更改为 

 便可以访问啦。

 2、vue项目中的config文件里的index.js中assetsPublicPath:'/' 要改成 assetsPublicPath:'./'

打包前

打包后

 

勇敢牛牛不怕苦难
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue脚手架项目打包成app_Vue cli3+Hubuilder将项目打包为App
weixin_35582019的博客
01-16 305
前言现在跨平台的开发越发的火了起来。前端能做到的事情也越来越多，App再也不用完全依靠安卓原生开发了。现在开发app的方式都是内核是前端开发，然后再给项目套一个安卓的外壳，即可实现app的开发。Vue开发app如何打包？现在最新的脚手架为Vue-cli3,构建出来的项目结构十分明了简单。配置文件只需一个Vue.config.js即可搞定。先到Vue.config.js里面添加：``` JSmodu...
vue-cli脚手架的.babelrc文件用法说明
10-14
`.babelrc` 文件是 Vue CLI 脚手架中的一个重要配置文件，用于定义 Babel 的转码规则和插件。Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者使用 ES6+ 甚至实验性语言特性，然后将这些新特性转换为广泛...
vue-cli打包app(HBuilderX)
weixin_49645803的博客
10-06 554
vue-cli打包app(HBuilderX)
vue项目如何打包以及如何变成android、ios应用程序
最新发布
2401_84435192的博客
06-18 385
在中，我们就可以写很多webpack配置，常用的有: 配置端口号，配置跨域服务器代理等。我们需要的主要是配置一个打包的目录publicPath,否则打包出来的apk文件，安装在安卓手机上，可能出现白屏，具体配置如下:publicPath: “./”,// 需要配置 否则打包后的apk文件安装在手机可能白屏port: “6868”, // 配置开发服务器的端口号（打包可以无需配置）// 配置跨域代理(也可以使用CROS解决跨域)proxy: {“/ api”: {
vue脚手架项目打包成app_cordova+vue 项目打包成Android（apk）
weixin_35826166的博客
02-11 260
cordova+vue 项目打包成Android(apk)应1.安装cordova这一步的前提是已经完成安装node和npm,如果没有安装的话，请先完成node和npm的安装。node安装：直接进入官网https://nodejs.org/zh-cn/，下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。npm安装：由于新版的nodejs已经集成了npm，所以node安装...
HBuilder X 集成vue项目到5+APP中，运行打包测试发布
cscscssjsp的博客
07-29 4578
1.以下内容借鉴自https://www.cnblogs.com/taohuaya/p/10263519.html 一：打包vue项目 二：在HBuilder X 点击新建，选择5+app项目，新建后把vue打包的项目dist下的 static和index.html 复制到新建的app项目下 三：manifest.json,项目配置 配置完成后点击运行，可以用模拟器运行，也可以手机 安...
mui 传参跳转及获取
大白的博客
02-14 904
跳转： mui.openWindow({ url: './edit_item.html', id:'info', styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置 titleNView: { // 窗口的标题栏控件 titleText: "大众点评", // 标题栏文...
打包工具之parcel打包
wendy的博客
11-25 1771
前端工程化越来越普及，最热的打包工具必须是webpack。在webpack4.0以前，webpack打包的配置文件是极其繁琐的。而parcel宣称0配置、快速的特性，也让它有一席之地。今天，我们聊聊parcel的适用场景和那些踩过的坑。 **1 项目目录结构** 相信第一眼看到parcel的项目目录，大部分的人都会产生这样的疑问，这是现代化前端开发模式吗，确定没有回jsp那个时代。对的，parcel它就是一款无需任何配置就行进行多页面打包的工具，以至于它的目录层级看起来是那么的松散。每一个html文件就是p
vue-cli开发的商城源代码
01-18
Vue.js 的设计目标是使开发过程更加简单和高效，同时提供了丰富的生态系统，如Vuex（状态管理）、Vue Router（路由管理）和Vue CLI（项目脚手架）。 `vue-cli` 在这个项目中起到了基础架构的作用。它允许开发者通过...
vue-cli3.x+vue+vue-router+axios+node.js+mysql.zip
02-23
Vue CLI 3.x 是 Vue.js 官方推出的一款强大的脚手架工具，它极大地简化了 Vue 应用的初始化和构建过程。Vue CLI 提供了一套预设的配置，包括热加载、代码分割、ES2015 编译等，使得开发者可以快速搭建 Vue 项目。 ...
vue-cli.rar
12-24
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue.js 应用程序的脚手架。这个压缩包“vue-cli.rar”包含了2019年12月时Vue CLI的官方离线教程，是开发者们学习和掌握Vue CLI的重要资源。 Vue CLI 提供了...
vue-cli+webpack记事本项目创建
08-30
Vue CLI（Vue Command Line Interface）是 Vue 生态系统中的一个官方脚手架工具，用于快速搭建 Vue.js 项目。它内置了 Webpack 配置，简化了项目的初始化过程。在本项目中，我们将使用 Vue CLI 2.0 版本来创建项目...
使用HBuilderX将vue或H5项目打包app
鹏仔工作室的秘密基地
08-23 4959
好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示。第三步，我们打开新建项目的文件，如下图所示。
用vue-cli脚手架开发APP的步骤
想搞全栈的前端
07-30 3912
前言 本文主要记录vue-cli脚手架开发app的步骤，如果还未安装vue-cli的请查看vue-cli官方文档有详细过程。 项目地址：vue-cli-demo 效果 点击链接实现界面跳转，下方底部可以改成导航栏，中间内容自己修改。 步骤 1.创建模板 运行以下命令来创建一个新项目(项目名自己随意)： vue create test3 你会被提示选取一个 preset。你可以选默认的包含了基...
android studio+hbuilderx(5+app)+vue打包成手机app
zhoulib__的博客
05-08 2678
1、准备一个vue项目（项目中的文件名称不能有中文） 2、下载hbuilderx（app版）创建一个5+app的项目 3、注册hbuilder账户 （发布是需要appid）需要hbuilderx账户 4、把vue项目打包好的文件将原5+app中的内容替换调除了（manifest.json） 5、配置manifest.json文件（建议去官方看文档 ） 这是我修改后项目结构和发布的按钮 6、...
5 + app 打包vue项目使用axios请求网络数据，将UIWebview切换成WKWebview后无法发送网络请求。
hcx_hcx的博客
04-24 1211
5 + app 打包vue项目使用axios请求网络数据，将UIWebview切换成WKWebview后无法发送网络请求。 项目技术栈：Vue+vant前端框架 用h5+app打包 问题：5 + app 打包vue项目使用axios请求网络数据，将UIWebview切换成WKWebview后无法发送网络请求 分析：IOS UIwebview简单的来说是iOS 用来渲染页面的一个控件，IOS WKwebview是IOS UIwebview升级后的版本，2020年4月起，iOS不再接受使用UIWebV..
vue3 H5唤醒APP（调用原生）
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
11-01 759
vue3 H5唤醒APP（调用原生）
将vue开发的H5项目 通过uni_app本地打包成app
yao0924的博客
08-17 2367
首先在vue项目内需要重定向 vue.config.js文件中新增publicPath:"./"检查路由模式 只能使用hash模式 router.js文件内 不能使用history模式 以上两步是必须的 不改的话会导致在uniapp上运行后展示白屏在uniapp内新建项目 选择5+App 选择默认模板 点击创建创建完成后只保留manifest.json文件 将打包后的vue项目 也就是dist目录下的文件进行复制 放到新建的uniapp项目中填写manifest基础配置。
在html5+app里调试vue页面
qq_16855093的博客
02-18 1844
开发工具:HBuilderX 1.笔记本和手机连接到同一个WIFI 2.查询本地IP地址 WIN+R，输入cmd回车，输入ipconfig，查看本地IPv4； 3.修改网页项目中IP地址 找到项目中config文件夹，下面index.js文件打开；  找到如下代码 module.exports = { dev: { env: require('./dev.env'), ...
使用VSCode，使用vue-cli 脚手架，完成vue3的项目搭建。该系统包含添加，删除，编辑，切换和存储待办事项等功能。加入密码强度验证+防穷举验证码等安全要求。系统需要实现以下的需求： 1. 可以输入待办事项 2. 输入回车键，添加下一条待办，展现在输入框下，形成待办事项列表 3. 某条待办事项不想要了，可以删除 4. 某项待办事项完成了，可以勾选掉 5. 能够本地存储，用axios与后端接口进行数据联动（选做） 6. 还需要显示未完成事项（选做） 编写代码
05-29
首先，你需要安装 vue-cli 脚手架： ``` npm install -g @vue/cli ``` 然后，创建一个新的 Vue3 项目： ``` vue create my-app ``` 接着，你需要在 `src/App.vue` 中编写代码，实现待办事项的添加、删除、勾选等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值