1.找到项目文件夹
新建vue.config.js
(新建文件与package.json
同级)
module.exports = {
publicPath:'/',
outputDir:'dist',
assetsDir:'static'
}
2.打开项目router文件夹底下的index.js
在文件内容最底下位置部分的mode:'history'
改成 mode:'hash'
注意
两种路由方式:hash
与history
的区别
1)url的显示
hash /#/
history 没有#
2)回车刷新
hash 可以加载到对应的页面
history 一般会跳转到404页面(找不到原网页)
3)支持版本
hash 支持低版本的浏览器,包括低版本的IE浏览器
history 兼容性不好,有些浏览器不支持
3.npm run build
打包项目
在终端输入命令进行项目的打包,打包完成出来dist文件夹
注意
:打包完后需要自己在本地打开页面测试是否可以直接打开显示页面内容
4.再新建一个文件夹用于自己即将打包的APP项目存放位置
进入要新建文件夹目录的cmd终端,输入以下命令:
cordova create xxx(打包项目名称)
进入上面用cordova新建的打包的xxx文件夹底下,为项目添加平台(一定要注意是否在cordova新建的文件夹项目中)
cordova platform add android --save
再进入前面Vue项目打包出来的dist文件夹下,将里面的内容移到之前用cordova新建的文件夹底下的www文件夹下。
注意:
在移动前需要删除原有cordova新建项目底下的www文件夹底下的内容)
确认打包环境无误后,回到cordova建立的打包项目文件夹底下开始打包
cordova build android
打包成功后在终端显示地方会提示自己打包的一个路径
Build the following apk(s):
xxxxxx(打包文件所在的路径位置)
再根据这个路径进入这个路径就能找到打包出来的app了。