Cordova打包构建好的vue项目方法

最新推荐文章于 2022-09-26 18:48:37 发布

JMZ:)

最新推荐文章于 2022-09-26 18:48:37 发布

阅读量174

点赞数

分类专栏： Android开发文章标签： cordova vue Android开发

本文链接：https://blog.csdn.net/qq_42324063/article/details/102642001

版权

Android开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Cordova打包构建好的vue项目方法

View my personal website

假设已经存在构建好的vue项目，用Cordova将其打包在Android平台上的方法。

搭建Cordova环境和Android环境

在vue项目文件同级目录下新建Cordova项目：
```
cordova creat cordova-app com.test.cordova myApp
```
参数说明：
- 第一个参数 cordova-app 为工程的文件夹名
- 第二个参数（可选）com.test.cordova 为应用程序的id名，可以在 config.xml 中修改，如果不指定的话默认io.cordova.hellocordova
- 第三个参数（可选）myApp为App显示的名称，也可在 config.xml 中修改
添加Android平台支持

进入工程目录
```
cd cordova-app
```
添加Android平台文件
```
cordova platform add android
```

修改vue项目

修改 config/index.js 文件中 build 属性节点下的 index、assetsRoot 属性，将它们改成 Cordova 项目下的 www 文件夹（注意是 build 下的 index、assetsRoot 属性，不要改成 dev 下的了）

build: 
{ ...
  //将文件直接编译到 cordova 项目下面
  index:path.resolve(__dirname,'../../cordova_project/www/index.html'),
  assetsRoot:path.resolve(__dirname,'../../cordova_project/www'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '',  //原来是 '/'
  ...
}

修改index.html, 加入cordova.js

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hangge.com</title>
</head>
<body>
    <div id="app"></div>
    <script type=text/javascript src=cordova.js></script>
</body>
</html>

修改src/main.js：将 new Vue() 代码放到 deviceready 回调里面。（在使用 pc 开发调试时可以先把外层的这个监听给注释掉，等到要打包成 app 时再放开。）

document.addEventListener('deviceready', function() {
  new Vue({
      el: '#app',
      store,
      router,
      components: { App },
      template: '<App/>'
  })
}, false);

编译vue项目

在vue工程路径下执行

npm run build

即可编译到cordova/www下

编译Cordova工程

编辑完cordova/www文件后，执行

cordova build

即可编译Cordova工程，此时在Android studio中运行即可在虚拟机上看到app界面。

JMZ:)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cordova打包构建好的vue项目方法

Cordova打包构建好的vue项目方法搭建Cordova环境和Android环境修改vue项目编译vue项目编译Cordova工程View my personal website假设已经存在构建好的vue项目，用Cordova将其打包在Android平台上的方法。搭建Cordova环境和Android环境在vue项目文件同级目录下新建Cordova项目：cordova creat ...
复制链接

扫一扫