搭建Cordova+Vue2项目

1.创建cordova项目，查看教程

2.项目根目录下创建web文件夹，web文件夹放置vue项目源码

3.修改vue项目index.html文件,导入cordova.js文件

 <script src="cordova.js">script>

4.Vue安装vue-cordova插件

npm install --save vue-cordova

5.在Vue项目main.js中配置vue-cordova

import VueCordova from 'vue-cordova'
Vue.use(VueCordova);

6.cordova安装cordova-plugin-device插件

cordova plugin add cordova-plugin-device

7.监听cordova加载完成事件

Vue.cordova.on('deviceready', () => {
  });

8.配置vue打包路径到cordova项目的www文件夹下，修改vue项目config/index.js文件

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../www/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    ...
  }

9.vue css中引入图片不显示处理，修改vue项目build/utils.js文件

// generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../',//增加配置
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

10.设置调试运行命令，修改cordova项目下的package.json，添加scripts命令

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "debug": "cd web&&npm run build&&cd ..&&cordova run android"
    }

11.调试运行,在cordova项目根目录下，连接模拟器或者真机，执行npm run debug命令即可