ionic4.x+vue windows系统搭建android混合开发框架

前言：环境搭建参考 本人的另一篇文章 https://blog.csdn.net/weixin_37852133/article/details/103063682

一、项目框架搭建：

1、如果没有全局安装vue插件的，cmd请执行

npm install -g @vue/cli

2、初始化一个vue项目 ，项目文件夹自定义（这里定义项目名称demo）

vue create demo

这时候会让你选择一个模板，这里根据自己的偏好就行

3、初始化项目完成后，启动项目查看一下，执行

cd demo

npm run serve

默认端口是8080，直接在浏览器访问查看效果。

这里退出服务按 ctrl+c;

4、接下来我们为项目添加 Vue Router 和 Ionic 框架

vue add router
npm install @ionic/vue

安装vue router 会让你选择

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

这里建议选择 no；

添加ionic框架

npm i @ionic/vue

5、建议使用vscode开发工具进行开发

6、打开项目，首先打开 src/main.js, 添加下面三行代码

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

7、接下来修改src/index.js:

import Vue from 'vue'
import Home from '../views/Home.vue'
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

现在，我们就可以访问Ionic的组件了，如下修改Home.vue的代码。

<template>
  <div class="home">
    <div class="ion-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Hello World</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <h1>Welcome To @ionic/vue</h1>
        <img alt="Vue logo" src="../assets/logo.png">
      </ion-content>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

服务启动中遇到的问题：

warning  in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'

执行 

npm i ionicons@4.5.9-1 -D

项目初始化为ionic项目，执行

ionic init

控制台异常信息

http://localhost:8080/sockjs-node/info?t=1574128701462 net::ERR_CONNECTION_REFUSED

这里直接修改依赖文件

node_modules\sockjs-client\dist\sockjs.js

1606 行代码 注释掉 ok；

执行项目启动命令

npm run serve

查看项目是否可以正常运行以及控制台是否存在异常信息；如果一切正常说明ionic+vue项目架构已经完成了，嘻嘻！！！！！

二、项目测试发布

1、首先借助 ionic 开发的 capacitor，他是一个类似于 cordova 的可以提供本机接口的工具，同时它也兼容很多现有的 cordova 插件

该项目中安装capacitor，执行

npm install --save @capacitor/core @capacitor/cli

2、初始化 capacitor，App name 和 App Package ID 根据你自己的项目去进行填写

npx cap init

3、我们需要改一下 capacitor.config.json 里的 webDir，改成 dist，因为vue项目的构建目录为dist，这样可以省的我们去复制代码到 www 目录（并且我们也没有创建 www 目录）。

"webDir": "dist"

4、构建我们的项目 

npm run build

5、我们使用 capacitor 添加对Android平台的支持，并将构建的代码拷贝到Android项目库里

npx cap add android
npx cap copy android

这个时候你会看到你项目多出一个android项目文件夹，其实这里将你的的项目编译为一个android项目，你直接用android studio就可以打开

6、我们就可以使用Android Studio打开项目，使用模拟器运行项目，或是构建app。
也可以直接使用 capacitor启动Android Studio，运行

npx cap open android

这里可能打开你电脑上的android studio 软件会慢，请耐心等待！！！！！！！！！！！！！！！！

7、打开android studio 既可以配置模拟器预览也可以直接真机测试

8、项目打包app跟android 项目一样发布流程。这里就不追叙了，请参考

https://www.cnblogs.com/lsdb/p/9337342.html

 

至此，项目整体架构以及发布测试流程，描叙完毕，如果对你有帮助，请给我个关注，谢谢！！！！！