【vue】用cordova打包成app详解(解决白板问题)

1.配置环境 

 

cordova是利用nodeJS进行管理的, 首先下载nodeJS (http://nodejs.org) ，如果是Mac已经有的话就不用装了

 

2. 使用命令行安装 

 

sudo npm i  cordova -g

 

3. 创建工程 

 

cordova create hello(文件夹名) com.example.hello(id) HelloWorld(工程名)

 

到这一步我们就需要把我们npm run build生成的dist里边的所有内容，放进cordova项目里，如图放入www

 

当然在生成dist之前我们还有两个问题需要解决：

 

(1).其中index.html牵涉到在当前目录下寻找static资源，这个是在在原项目中build前就应该解决的问题

 

在原项目中找到config/index.js,修改

 

build:{

//assetsPublicPath: '/',

assetsPublicPath: './',

}

 

(2).另外，为了不在static文件中生成比较大，而且对打包app没有什么用的.map文件

同样可以修改

 

build:{

    /**

     * Source Maps

     */

    //productionSourceMap: true,

    productionSourceMap: false,

}

 

最终，我们就可以npm run build ，生成dist

 

c

 

我们可以打开这里边的index.html，看看是不是白板，如果是白板，在浏览器中右键检查，找到报错问题解决，直到出现内容为止

然后就可以将dist放进cordova项目里www中了，如上图所示

如果没报错，页面还是空白，应该是router-view里边的内容没有显示出来

在路由管理的时候把注掉 //mode : 'history' 就可以了

 

4.回归cordova，添加相关组件并运行 

 

cd hello

 

cordova platform add ios/android

 

cordova build(生成ios项目文件)    //如果生成android并打包成app是cordova build android,

                                //此时可以看到在项目的platform--android--build--outputs--apk