使用Vue构建Ionic混合APP系列教程最后一篇（五）：使用Vue CLI编译最终的Cordova应用

最新推荐文章于 2023-10-26 11:09:24 发布

家威Geek

最新推荐文章于 2023-10-26 11:09:24 发布

阅读量4.8k

点赞数 4

分类专栏： Vue+Ionic

本文链接：https://blog.csdn.net/liujiawei00/article/details/79446231

版权

Vue+Ionic 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

狗年大吉，恭喜发财。

新年之后第一次写文章，将年前未完成的系列最后一篇结束掉。

一些想说的话：

不论是Angular还是Vue，或者Jquery甚至原生的html，都可以通过Cordova的封装作为webview以原生应用的方式安装到你的手机上呈现。

我们这个系列教程的目的就是想在Vue里可以使用Ionic这个漂亮的框架，不过你也可以使用其它的UI框架，比如：VUX，Onsen-UI，WEEK，Vue-material等等实现混合应用，甚至Week也像Ionic那样帮你封装好了Cordova命令。

如果我们想使用Angular，也不一定非要使用Ionic，我们也可以使用Angular-material等等其它任何你喜欢的UI框架。

当初我们从Ionic接触了混合开发，就认为它是最好的混合开发框架，其实世界很大，而我们知道的太少。

这一切的一起，都要感谢Cordova。

然而在刚刚过去的2月27号，Ionic官方正式宣布Capacitor测试版本发布，这意味着它们会在未来的Ionic版本逐渐摆脱Cordova，主推自己的开源Capacitor框架，暂时我们可以将Capacitor理解为类似于Cordova的东西，据Ionic的官方博客的说法，他们认为这个会比Cordova性能更好，更简单。

不得不承认Cordova已经在混合应用开发领域独占鳌头许多年，虽然现在还不知道Ionic的Capacitor会不会影响Cordova的市场地位，但是挑战的号角已经发出，让我们期待Ionic在混合应用领域带来的变化吧。

开始：

在之前的教程里，我们已经掌握了基于Vue框架构建Ionic应用的大部分知识。剩下的一大步就是使我们的Ionic/Vue应用在iOS和Android手机运行。在Ionic/Angular环境下实现这个很简单，因为Ionic CLI已经帮我们封装好了Cordova命令。不过当我们使用Ionic/Vue的时候我们需要自己多做一些配置工作。

在本篇文章，我们会谈谈如何使用Cordova将我们的Ionic/Vue代码封装为原生应用。我们使用的方法可以方便的将使用webpack和Vue CLI构建的Vue项目整合为Cordova应用。

注意：我们不会再本文谈论我们之前已经讲过的如何使用Vue构建Ionic应用。我们只是对一个普通的Vue CLI项目使用Cordova进行设置。如果你想了解如何将Ionic添加到这个Vue项目，你应该回到教程开始的地方。

1.添加Cordova到一个Vue项目

我们要做的第一件事就是使Cordova和Vue在同一个项目工作。幸运的是，这非常简单。但是将现有的Vue项目集成到一个新的Cordova项目比其他方法都要更加简单。

首先我们要创建一个新的Cordova项目。为了做到这个我们需要在电脑安装Cordova。也许你已经安装了，不过如果没有的话，你需要先运行下面的命令来安装Cordova CLI:

npm install -g cordova

一旦你安装好了Cordova，你可以用下面的命令创建一个新的Cordova项目：

cordova create my-project-name

如果你有Ionic/Angular背景，那这个Cordova创建的项目看起来应该很眼熟（它有你在Ionic/Angular应用里看到的大部分文件/文件夹）。

我们要做的就是将Vue项目最终生成的文件(html,css,assets等)放到www文件夹下面。这里是Cordova会封装为原生应用的东西。一旦我们有了这些文件，我们就可以使用Cordova构建命令。

我们可以将Vue应用独立开来，手动的拷贝这些文件到我们Cordova项目的www文件夹下面。不过这有点麻烦耗时。我们打算在Cordova项目里直接添加Vue以便在同一个项目文件夹下面做开发。

在Cordova项目里添加Vue，你只需要在Cordova项目里面运行以下命令：

vue init webpack

如果在这个命令行下不提供projec name（以往都会提供），它会在你目前所在的文件目录下创建项目。否则，它会在Cordova项目里面创建一个新的文件夹，而我们不想这样。

一旦你完成了上面的命令，你可以运行下面的命令来检查你的Vue应用可以还构建和运行：

npm run dev

2.准备应用

就像我们在上面说的，Cordova会封装所有www文件夹下的文件为一个原生应用。不幸的是，默认情况下，如果我们运行：

npm run build

编译的文件都会自动放在dist文件夹下。这不是什么大问题，不过我们需要做一些改动，以便这些编译后的东西可以自动放到www文件夹下。

修改config/index.js文件下的build属性：

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../www/index.html'),
 
  // Paths
  assetsRoot: path.resolve(__dirname, '../www'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
 
  /**
   * Source Maps
   */
 
  productionSourceMap: true,
  // https://webpack.js.org/configuration/devtool/#production
  devtool: '#source-map',
 
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
 
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
}

我们将dist改为了www，而且还有另一个重要的改动：

assetsPublicPath改为了./ 如果没有这个改动，file://协议不能工作，你的文件也不能使用Cordova加载。

既然www文件夹成为了默认的文件，你应该在第一次build之前删除原来的www文件夹。

我们也要在index.html做些改动。

在index.html添加cordova.js:

<script type="text/javascript" src="cordova.js"></script>

在index.html添加以下标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

如果你打算使用git，你也要更新你的.gitinore文件：

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
 
*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
 
.idea/
.sass-cache/
.tmp/
.versions/
coverage/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/
 
Thumbs.db
UserInterfaceState.xcuserstate

这就是我们要做的所有配置，现在我们可以使用Cordova构建应用。

3.编译iOS和Android

按照以前熟悉的配方，我们是这样做的：

cordova platform add ios --save

cordova platform add android --save

如果你想使用Cordova插件，你可以这样安装：

cordova plugin add plugin-goes-here

构建你的Vue应用：

npm run build

然后运行到手机上：

cordova run ios --device

cordova run android --device

这些仍然有很多不必要的工作，所以我们打算设置我们自己的命令。

修改package.json:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build android": "npm run build && cordova build android",
    "build ios": "npm run build && cordova build ios",
    "android": "npm run build && cordova run android --device",
    "ios": "npm run build && cordova run ios --device"
},

我们设置了四个命令，可以像下面这样使用：

npm run build android //Builds the VueJS code and builds the Android application
npm run build ios //Builds the VueJS code and builds the iOS application
npm run ios //Builds the VueJS code and runs the iOS application
npm run android //Builds the VueJS code and runs the Android application

总结：

为了配置Cordova和Ionic/VueJS应用，我们多做了一些事情。不过一旦你像上面这样设置好就和使用Ionic／Angular来构建和部署应用一样简单了。

家威Geek

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
使用Vue构建Ionic混合APP系列教程最后一篇（五）：使用Vue CLI编译最终的Cordova应用

狗年大吉，恭喜发财。新年之后第一次写文章，将年前未完成的系列最后一篇结束掉。一些想说的话：不论是Angular还是Vue，或者Jquery甚至原生的html，都可以通过Cordova的封装作为webview以原生应用的方式安装到你的手机上呈现。我们这个系列教程的目的就是想在Vue里可以使用Ionic这个漂亮的框架，不过你也可以使用其它的UI框架，比如：VUX，Onsen-UI，WEEK，Vue-m...
复制链接

扫一扫