Cordova11+Vue2


======================先进入工程文件夹下:==========================
// 初始化web(vue)项目
vue init webpack web
// 添加新的cordova 项目
cordova create H5 org.apache.cordova.myApp myApp
// 添加安卓平台(H5/platforms/android)
cordova platform add android

======================新建main(h5).js================================
//  作为H5打包所需要的入口文件,同main.js区分出来
===> web/src/main(h5).js里面做出如下区别
// 'deviceready' 是 cordova 执行环境认可的事件
document.addEventListener('deviceready', function() {
    new Vue({}); //构建vue对象是 在deviceready事件触发所要执行的代码
    window.navigator.splashscreen.hide();
}, false)

==================新建index(H5).html==================================
// 和index.html区分出来,专门用于H5打包
<meta> 是为了运行在手机浏览器(H5应用)
cordova.js 对应 H5/platforms/android/platform_www/cordova.js
===> web/index(H5).html加入代码:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script type="text/javascript" src="./cordova.js"></script>

=========================构建流程改动==================================
修改webpack配置,web/package.json 新添"build:h5": "node build/build(h5).js"
新建 build/build(h5).js
const webpackConfig = require('./webpack.prod(h5).conf')
新建 webpack.prod(h5).conf.js 实现如下
output:{
    path: config.buildH5.assetsRoot,
    filename: path.posix.join(config.buildH5.assetsPublicPath, 'js/[name].[chunkhash].js'),
    chunkFilename: path.posix.join(config.buildH5.assetsPublicPath, 'js/[id].[chunkhash].js'),
    publicPath: config.buildH5.assetsPublicPath,
}
plugins: [
    new ExtractTextPlugin({
        filename: path.posix.join(config.buildH5.assetsPublicPath, 'css/[name].[contenthash].css'),
        allChunks: true,
    }),
]
在config/index.js添加
buildH5: {
    // 生成的目标文件
    index: path.resolve(__dirname,  '../../h5/www/index.html'),
    // 目标文件夹
    assetsRoot: path.resolve(__dirname,  '../../h5/www'),
    // 指定模板的名字
    template: 'index(H5).html',
    assetsSubDirectory: "",
    // 不要 static 做js,css的上级文件夹,所以置空,这样可以生成www/js www/css 两个文件夹
    assetsPublicPath: "",
}
===========================构建APK===============================
1.构建web项目
cd web; npm run build:H5
2.构建安卓的命令
cd H5; cordova build android
3.拖入模拟器或者真机调试
在 H5/platforms/android/app/build/outputs/apk/debug/ 下面找到 apk
4.正式发布
cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey

posted @ 2022-01-28 23:01  XSS-Freak  阅读(178)  评论(0)    收藏  举报