More and more developers in China are now using Vue to develop hybrid apps, but when they are done, they find they don't know how to package the Vue project into an app.
As far as I know, the package Vue project is now popular with Weex and Cordova. Weex is offered by Ali and the author of Vue is also highly recommended, interested in learning to use it. Because I am doing angular+ionic, so compare favor Cordova, below I teach you how to use Cordova Package Vue project: First step: Install Cordova
If it is already installed, skip directly, otherwise execute the following command:
NPM install-g Cordova
If this command doesn't work, I suggest you don't keep looking down. Step Two: Create a new Cordova project
Execute command
Cordova Create Cordovaapp com.cordova.testapp CD Cordovaapp Cordova Platform Add Android
Our Cordova project has been created here. Step Three: Modify the Vue project
If you do not have Vue project, Baidu to create a new Vue project. first modify the index.html of the Vue project
Join in between head
<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 join <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 the change is not added, otherwise it is recommended to add. This section is primarily to prevent cross-site scripting attacks.
Then introduce cordova.js
<body>
<div id= "app" ></div>
<script type= "Text/javascript" src= "Cordova.js" ></ Script>
<!--built files would be auto injected-
</body>The Vue build version to load with the ' Import ' command
//(runtime-only or standalone) have been set in Webpack.bas E.conf with an alias.
Import vue from ' Vue '
import app./app '
import router from './router '
Vue.config.productionTip = false< c10/>/* eslint-disable no-new *
/Document.addeventlistener (' Deviceready ', function () {
new Vue ({
el: ') #app ',
router,
store,
Template: ' <App/> ', components
: {app}
}
Window.navigator.splashscreen.hide ()
}, False);In the build, modify the
Assetssubdirectory: ' Static ',
Assetspublicpath: '/',For
Assetssubdirectory: ',
assetspublicpath: ',And then run
NPM Run Dev
To see if we can run it up, If the normal description here is not a problem (note that this is the time to run the Document.addeventlistener note, because in the browser environment is not able to find cordova.js can not hear the Deviceready event, packaged on the real machine to achieve monitoring). Fourth Step: Place the Vue file in the Cordova Project and package
Run first in the Vue project
NPM Run Build
After execution, a dist folder will be generated to find this folder to copy all the files inside to your Cordova project's WWW folder to replace its original files.
Then you can do it.
Cordova Build Android
An executable apk file will be generated and installed.
The package of our Vue project has been completed here. Friendly tips:
If the Vue project encounters a problem when running npm run Dev or npm run build, you can remove the Node_modules folder using NPM install if it is not a code error.
If it is because Eslint causes the code check to pass, the rules in the Webpack.base.config file under the build folder of the Vue project can be
{
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
