bug:项目运行没毛病,一打开页面显示error
解决方法:(原因:路径错误)
1、打开vue项目修改配置参数
1、根目录下config/index.js找到里面build下面的assetsPublicPath:'/',把它改成assetsPublicPath:'./'(或assetsPublicPath:'')
2、根目录下/build/utils.js里面加一句代码约47-55行位置,publicPath : '../../ '
3、修改build文件下的webpack.prod.config.js文件output中publicPath:'./'
2、 处理物理按键返回问题
cnpm install vue-awesome-mui
//main.js
import Mui from 'vue-awesome-mui';
Vue.use(Mui);
//index.js
<script type="text/javascript">
mui.init({
keyEventBind: {
backbutton: true, //关闭back按键监听
}
})
//首页返回键处理
// 处理逻辑: 1s内,连续两次按返回键,则退出应用;
var first = null;
mui.back = function(){
// 首次按键, 提示 再按一次退出应用
if(!first){
first = new Date().getTime();//记录第一次按下回退键的时间
mui.toast("再按一次退出应用");
history.go(-1); // 回退到上一页
setTimeout(function(){
//1s 后清除
first = null;
}, 1000);
}else{
if(new Date().getTime() - first < 1000){
//如果两次按下的时间小于1s
plus.runtime.quit(); //那么就退出app
}
}
}
</script>
3、npm run build 打包dist,准备待用
4、打开HbuildX,新建项目
5、删掉新项目其他文件,只保留一个配置文件
6、将打包好的vue项目的dist文件夹中的内容,放到刚才新建的项目中
7、填写相关配置云打包
启动图设置
8、发行—原生APP云打包
9、点击打包,等待
8、下载地址下载到手机,然后右键转发给别人,或文件管理找到.apk文件,把apk文件放到服务器上,然后把地址拿来
9、页面点击按钮即可永久下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>亘今商城</title>
<style>
* {
padding: 0;
margin: 0;
}
.app {
width: 100%;
min-height: 100vh;
/* background: rgb(141, 159, 241); */
box-sizing: border-box;
padding-top: 1px;
font-size: 18px;
color: rgb(44, 95, 206);
font-weight: 700;
background-color: #fff;
}
.img {
width: 130px;
height: 130px;
margin: 70px auto;
text-align: center;
}
.img1 {
width: 130px;
height: 130px;
margin: 20px auto;
text-align: center;
}
.img img {
width: 100%;
height: 100%;
border-radius: 10px;
margin-bottom: 20px;
border: 1px solid #c5a47b;
}
.img1 img {
width: 100%;
height: 100%;
}
.img p {
color: #999;
font-size: 12px;
margin-top: 6px;
font-weight: normal;
}
.open,
.download {
padding: 5px 15px;
background: rgba(255, 255, 255, 1);
border-radius: 10px;
margin: 0 auto;
font-size: 17px;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: rgba(202, 20, 0, 1);
border: 1px solid #ccc;
text-align: center;
width: 30%;
margin-top: 150px;
}
.open {
margin-bottom: 30px;
}
.msg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
padding: 20px 40px;
border-radius: 10px;
background-color: rgba(0, 0, 0, .7);
color: #fff;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="app">
<div class="img">
<img src="./2.png" alt="Image">
<span>亘今商城</span>
<p>版本:1.0.1</p>
<p>大小:7.5M</p>
</div>
<!-- <div class="open">打开汉富新生活</div> -->
<div class="download">安卓下载</div>
<div class="img1">
<img src="./1.png" alt="Image">
</div>
<!-- <div class="msg">如果没有App <br>请点击前往下载</div> -->
</div>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
<script>
window.onload = function() {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// document.querySelector('.open').onclick = function() {
// if (isAndroid) {
// window.location.href = 'launchapp://haha?data=mydata';
// window.setTimeout(function() {
// document.querySelector('.msg').style.display = 'block';
// window.setTimeout(function() {
// document.querySelector('.msg').style.display = 'none';
// }, 3000)
// }, 5000);
// }
// // if (isIOS) {
// // location.href = 'hanlife://';
// // }
// }
//判断如果是微信环境,提示在浏览器打开
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
console.log(111);
alert('请在浏览器中打开')
} else {
console.log(88);
}
document.querySelector('.download').onclick = function() {
console.log(111);
if (isAndroid) {
console.log(22);
location.href = 'http://shop.genjin168.com/genjin.apk';
}
// if (isIOS) {
// location.href = 'https://itunes.apple.com/cn/app/%E6%B1%89%E5%AF%8C%E6%96%B0%E7%94%9F%E6%B4%BB/id1458588987?l=zh&ls=1&mt=8';
// }
}
}
</script>
</body>
</html>