Cordova Package Vue Project

Source: Internet
Author: User
Tags eval
   
 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.  
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.