Step 1: install cordova
Skip if it is already installed, otherwise execute the following command:
Npm install -g cordova
If this command does not work, then I suggest you not to continue to look down.
Step 2: Create a new cordova project
Excuting an order
Cordova create cordovaApp com.cordova.testapp
Cd cordovaApp
Cordova platform add android
Our cordova project is created here.
The third step: modify the vue project
If you don't have a vue project, go to Baidu to create a new vue project.
First modify the index.html of the vue project
Join between heads
<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">
Note here to add <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:;">This may cause the page style to change, if it is changed, it will not be added, otherwise it is recommended to add.
Then introduce cordova.js
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto inject -->
</body>
Then modify the main.js in src to the following code
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
Import Vue from 'vue'
Import App from './App'
Import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
document.addEventListener('deviceready', function() {
New vue({
El: '#app',
Router,
Store,
Template: '<App/>',
Components: { App }
})
Window.navigator.splashscreen.hide()
}, false);
Finally modify the index.js file in the config folder
Modify the build
assetsSubDirectory: 'static',
assetsPublicPath: '/',
for
assetsSubDirectory: '',
assetsPublicPath: '',
Then run
Npm run dev
See if it works, if there is no problem with the normal instructions here.
Step 4: Put the vue file in the cordova project and package it
First run in the vue project
Npm run build
After the execution is completed, a dist folder will be generated. Find this folder and copy all the files in it to the CD folder of your cordova project to replace its original file.
Then you can execute
Cordova build android
Will generate an executable apk file, you can install it.
Finished the packaging of our vue project here.
friendly reminder:
If the vue project encounters problems when running npm run dev or npm run build, it is generally not a code error. You can delete the node_modules folder and install it using npm install.
If the code check does not pass because of eslint, you can use the rules in the webpack.base.config file under the build folder of the Vue project.
{
Test: /\.(js|vue)$/,
Loader: 'eslint-loader',
Enforce: 'pre',
Include: [resolve('src'), resolve('test')],
Options: {
Formatter: require('eslint-friendly-formatter')
}
},
This code comment can be. Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
