obsidian_note/各种项目/光交锁/创建Cordova中可用的Vue项目.md

Vue 工程创建

1. 创建 Vue 需要用到的 cli 安装

   npm install -g @vue/cli

2. 创建vue工程

   vue create vue-app

3. 点击回车后，会进入选取项目特征页面，这里我们选择手动选取

   Vue CLI v5.0.1 ? Please pick a preset: Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) ❯ Manually select features

4. 配置特征

   Vue CLI v5.0.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, to toggle all, to inv ert selection, and <enter> to proceed) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◯ CSS Pre-processors ❯◯ Linter / Formatter ◯ Unit Testing ◯ E2E Testing

5. 选择Vue的版本，这里选择3.x

   Vue CLI v5.0.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 3.x 2.x

6. ==下一项需要注意，会提示我们是否使用history的路由形式，如果是浏览器可以选择这种路由，但是在cordova中并没有history对象，所以这里需要输入 n ，选择不适用history的模式==。

   Vue CLI v5.0.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex ? Choose a version of Vue.js that you want to start the project with 3.x ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

7. 选择配置文件位置，使用默认选项即可

   ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json

8. 对未来项目的预置

   ? Save this as a preset for future projects? (y/N) n

完成上述工作，等待项目自动初始化即可。

Vue 工程改造

1. 在Vue的index.html中引入cordova.js（这里的cordova.js是在cordova工程中生成的，所以在vue项目中是找不到这个文件的。）

// vue/public/index.html
<script src="cordova.js"></script>

1. 修改Vue默认打包位置，创建或者修改 Vue 根目录下的 vue.config.js 文件（默认为 dist，改成cordova工程目录中的前端源码目录 www。）

// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
//   transpileDependencies: true
// })
module.exports={
  outputDir:'../myCordovaApp/www'
  // 指定加载路径
  publicPath:'./'
}

1. 在Vue 的index.html 中引入Cordova 的 meta 标签

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 与 cordova 工程中重复的，注释掉，使用cordova中的meta标签 -->
    <!-- <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="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <meta name="color-scheme" content="light dark">

1. 为 index.html 添加 deviceready 事件（vue/src/main.js）

// createApp(App).use(store).use(router).mount('#app')
const app = createApp(App)
app.use(store).use(router)
// 这里添加 deviceready 事件
document.addEventListener('deviceready',function(){
    // 将挂载过程放入回调方法中
    app.mount('#app')
},false)

打包测试

创建cordova工程 cordova create myCordovaApp com.insper.cordova myCordovaApp

在vue工程中执行打包命令 npm run build

执行此命令后，会将vue 工程打包后的 html、js、css 等文件 放入vue.config.js 文件中配置的指定位置，方便起见我们可以直接指定这个位置为 cordova 工程的 www 目录。

在cordova工程中执行编译打包命令 cordova run android

手机端安装成功后出现myCordovaApp启动出现 vue官方默认页面说明工程构建成功。