Home > Article > Web Front-end > How Cordova packages Vue projects

How Cordova packages Vue projects

小云云Original: 2018-01-15 13:33:521801browse

This article mainly introduces how to use Cordova to package Vue projects. It also introduces in detail how to package Vue projects into apps. It has certain reference value. If you are interested, you can learn more. I hope it can help everyone.

Nowadays, more and more developers in China are using Vue to develop hybrid apps. However, after everyone has completed the development, they find that they don’t know how to package the Vue project into an app.
As far as I know now, the most popular way to package Vue projects is to use weex and cordova. Weex is provided by Alibaba and highly recommended by the author of Vue. If you are interested, you can learn and use it. Because I work in angular+ionic, I prefer cordova. Now I will teach you how to use cordova to package Vue projects:

Step 1: Install cordova

If it has been installed, skip it directly, otherwise execute the following command:

npm install -g cordova

If this command will not run, then I suggest you not to continue reading.

Step 2: Create a new cordova project

Execute the command

cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android

Our cordova project is here Created.

Step 3: 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

Add

<meta http-equiv="Content-Security-Policy" content="default-src &#39;self&#39; data: gap: https://ssl.gstatic.com &#39;unsafe-eval&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; media-src *; img-src &#39;self&#39; 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">

Be sure to add

c572fc5c93680e38e37657878eb6f511This may cause the page style to change. If it changes, do not add it. Otherwise, it is recommended to add it.

Then introduce cordova.js

<body>
  <p id="app"></p>
  <script type="text/javascript" src="cordova.js"></script>
  <!-- built files will be auto injected -->
</body>

Then modify 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 &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
Vue.config.productionTip = false

/* eslint-disable no-new */

document.addEventListener(&#39;deviceready&#39;, function() {
  new Vue({
    el: &#39;#app&#39;,
    router,
    store,
    template: &#39;<App/>&#39;,
    components: { App }
  })
  window.navigator.splashscreen.hide()
}, false);

Finally modify the index.js file in the config folder

Modify

    assetsSubDirectory: &#39;static&#39;,
    assetsPublicPath: &#39;/&#39;,

in build to

    assetsSubDirectory: &#39;&#39;,
    assetsPublicPath: &#39;&#39;,

Then run

npm run dev

to see if it can run. If it works normally, there is no problem here.

Step 4: Put the vue file into the cordova project and package it

Run it in the vue project first

npm run build

After execution is completed, a dist folder will be generated. Find this folder and copy all the files in it to the www folder of your cordova project to replace its original files.

Then you can execute

cordova build android

will generate an executable apk file, just install it.

This completes the packaging of our vue project.

Friendly reminder:

If the vue project encounters problems when running npm run dev or npm run build, which is generally not a code error, you can delete the node_modules folder and use it. npm install installation.

If the code check fails due to eslint, you can change the rules in the webpack.base.config file under the build folder of the Vue project

      {
       test: /\.(js|vue)$/,
       loader: &#39;eslint-loader&#39;,
       enforce: &#39;pre&#39;,
       include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)],
       options: {
        formatter: require(&#39;eslint-friendly-formatter&#39;)
       }
      },

Just comment this code.

Related recommendations:

How to remove the

#vue project home page loading speed optimization example sharing

Sharing about common components and framework structures of vue projects

The above is the detailed content of How Cordova packages Vue projects. For more information, please follow other related articles on the PHP Chinese website!

html npm angular webpack JS default http https ssl

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use router in vue-cliNext article：How to use router in vue-cli

See more

How Cordova packages Vue projects

Related articles