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

浙公网安备 33010602011771号