cordova 整合 webpack vue

Posted 雪松

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cordova 整合 webpack vue相关的知识,希望对你有一定的参考价值。

cordova 是hybrid开发app的一个框架,通过js桥接原生api实现了js调用原生的一些功能;本打算学习下阿里的weex;可是一直打包不了,加上之前也用过cordova,打算使用cordova尝试一下;整合上vue这种开发界面的利器是不是更加爽呢?

    1.环境搭建

 > cordova环境搭建

        由于我们使用cordova作为app开发框架,我们得先搭建cordova;cordova的安装可以使用npm yarn等安装;全局安装: npm install -g cordova 

        由于需要打包app自然需要android sdk 或者 ios sdk (土豪们的mac下xcode是要安装的)

       可以参考官网: http://cordova.apache.org/#getstarted

        > vue环境搭建

        vue的环境搭建没什么难度吧,直接按照官网做就行

        vue-cli的安装: npm install -g vue-cli

    

     2.构建项目

       创建项目由于是将cordova和vue整合,而vue使用webpack调试,发布;因此必须按照先 cordova 后 vue的方式进行;不过你可以尝试下先创建vue项目文件再创建cordova项目,看会报什么错。

       > 搭建cordova项目

        按照官网示例cordova create appName com.app.appName appName方式创建一个项目,生成如下结构项目文件:

        技术分享图片

      添加android平台sdk:cordova platform add android 

      这是一个标准的cordova项目目录,接下来我们将在该目录下通过vue-cli添加vue项目文件到该目录

   

      > 搭建vue项目

      同样安装vue官网示例创建vue项目: vue init webpack appName ; 注意此时会提示已存在该文件夹,是否覆盖,如下图: 

       技术分享图片

    我们选择Y继续

    好了,我们搭建好了vue的项目,进行appName项目目录,安装包 npm install 

    测试vue:npm run dev 正常打开http://localhost:8080/即为正常 

    此时项目结构如下:

    技术分享图片

      3. 整合vue到cordova

       如果熟悉cordova的人知道,cordova的html页面目录是存放在上图的www目录下的,而现在我们的vue源码目录再src下,打包后存放在dist目录下,cordova的入口文件www/index.html主要是引入了cordova.js作为桥接,如下代码: 

       

<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 *">
        <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">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>

       对比上面的代码和vue打包后的index.html文件代码,我们可以发现,cordova引入了Content-Security-Policy来设置比较宽松的资源加载策略和防止xss攻击;我们将其加入到根目录vue的index.html的头部,同时我们将cordova.js也加入到页面底部,最终我们根目录下的页面代码如下:

 

        

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <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 *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <title>vue-cordova-app</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

      此时,我们只要能将vue打包的目标路径定向到www目录即可完成整合。

 

      接下来就是修改vue的webpack打包,(webpack高手请忽略)

  •  修改 config/index.js 修改 ../dist 为 ../www
  •  修改 assetsSubDirectory 为 ‘./‘ 
  •  修改 assetsPublicPath 为 ‘‘   

       上述修改就将webpack打包目标路径改为www,将资源路径由dist/static/js改为了www/js目录、dist/static/css 改为了 www/css目录。

     

    执行命令npm run build 打包试试。

    最后再cordova run android试试

 

 

     

     好了,总算敲完了...


以上是关于cordova 整合 webpack vue的主要内容,如果未能解决你的问题,请参考以下文章

vue和cordova项目整合打包,并实现vue调用android的相机的demo

> vue-init@1.0.0 dev C:CodeSpaceCode-For-paperusevue2222examvue > webpack-dev-server --inline --(代码片

vue+phonegap(cordova)整合Android开发

vue+phonegap(cordova)整合Android开发

cordova与vue2集成

webpack构建优化—dll