How Cordova packages Vue projects-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How Cordova packages Vue projects

小云云

Jan 15, 2018 pm 01:33 PM

cordova how project

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

Copy after login

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

Copy after login

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">

Copy after login

Be sure to add

This 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>

Copy after login

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);

Copy after login

Finally modify the index.js file in the config folder

Modify

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

Copy after login

in build to

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

Copy after login

Then run

npm run dev

Copy after login

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

Copy after login

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

Copy after login

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;)
       }
      },

Copy after login

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!

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7319

Java Tutorial

1625

CakePHP Tutorial

1349

Laravel Tutorial

1261

PHP Tutorial

1209

Related knowledge

Can AI conquer Fermat's last theorem? Mathematician gave up 5 years of his career to turn 100 pages of proof into code Apr 09, 2024 pm 03:20 PM

Fermat's last theorem, about to be conquered by AI? And the most meaningful part of the whole thing is that Fermat’s Last Theorem, which AI is about to solve, is precisely to prove that AI is useless. Once upon a time, mathematics belonged to the realm of pure human intelligence; now, this territory is being deciphered and trampled by advanced algorithms. Image Fermat's Last Theorem is a "notorious" puzzle that has puzzled mathematicians for centuries. It was proven in 1993, and now mathematicians have a big plan: to recreate the proof using computers. They hope that any logical errors in this version of the proof can be checked by a computer. Project address: https://github.com/riccardobrasca/flt

A closer look at PyCharm: a quick way to delete projects Feb 26, 2024 pm 04:21 PM

Title: Learn more about PyCharm: An efficient way to delete projects. In recent years, Python, as a powerful and flexible programming language, has been favored by more and more developers. In the development of Python projects, it is crucial to choose an efficient integrated development environment. As a powerful integrated development environment, PyCharm provides Python developers with many convenient functions and tools, including deleting project directories quickly and efficiently. The following will focus on how to use delete in PyCharm

Share an easy way to package PyCharm projects Dec 30, 2023 am 09:34 AM

Share the simple and easy-to-understand PyCharm project packaging method. With the popularity of Python, more and more developers use PyCharm as the main tool for Python development. PyCharm is a powerful integrated development environment that provides many convenient functions to help us improve development efficiency. One of the important functions is project packaging. This article will introduce how to package projects in PyCharm in a simple and easy-to-understand way, and provide specific code examples. Why package projects? Developed in Python

PyCharm Practical Tips: Convert Project to Executable EXE File Feb 23, 2024 am 09:33 AM

PyCharm is a powerful Python integrated development environment that provides a wealth of development tools and environment configurations, allowing developers to write and debug code more efficiently. In the process of using PyCharm for Python project development, sometimes we need to package the project into an executable EXE file to run on a computer that does not have a Python environment installed. This article will introduce how to use PyCharm to convert a project into an executable EXE file, and give specific code examples. head

How to Make a Shopping List in the iOS 17 Reminders App on iPhone Sep 21, 2023 pm 06:41 PM

How to Make a GroceryList on iPhone in iOS17 Creating a GroceryList in the Reminders app is very simple. You just add a list and populate it with your items. The app automatically sorts your items into categories, and you can even work with your partner or flat partner to make a list of what you need to buy from the store. Here are the full steps to do this: Step 1: Turn on iCloud Reminders As strange as it sounds, Apple says you need to enable reminders from iCloud to create a GroceryList on iOS17. Here are the steps for it: Go to the Settings app on your iPhone and tap [your name]. Next, select i

Based on the open source ChatGPT Web UI project, quickly build your own ChatGPT site Apr 15, 2023 pm 07:43 PM

As a technology blogger, Fengfeng prefers all kinds of tossing. I have previously introduced ChatGPT to connect to WeChat, DingTalk and Knowledge Planet (if you haven’t seen it, you can read the previous article). Recently, when I looked at open source projects , discovered a ChatGPTWebUI project. Thinking that I have never connected ChatGPT to WebUI before, it is really good to have this open source project to use. Here are the practical installation steps to share with everyone. The installation official provides many installation methods on Github’s project documentation, including manual installation, docker deployment, and remote deployment. It’s amazing that when choosing a deployment method, I thought about simplicity at first.

What to do if there is an error when starting the react project Dec 27, 2022 am 10:36 AM

Solution to the error when starting the react project: 1. Enter the project folder, start the project and view the error message; 2. Execute the "npm install" or "npm install react-scripts" command; 3. Execute "npm install @ant-design/ pro-field --save" command.

PyCharm Tutorial: How to remove items in PyCharm? Feb 24, 2024 pm 05:54 PM

PyCharm is a powerful Python integrated development environment (IDE) that provides rich functions to help developers write and manage Python projects more efficiently. In the process of developing projects using PyCharm, sometimes we need to delete some projects that are no longer needed to free up space or clean up the project list. This article will detail how to delete projects in PyCharm and provide specific code examples. How to delete a project Open PyCharm and enter the project list interface. In the project list,

See all articles