Vue打包成App项目 HbuilderX使用hbuilderX创建一个空白的5+App项目，并删除除manifest.

使用hbuilderX创建一个空白的5+App项目，并删除除manifest.json文件以外的文件

使用vue-cli创建一个新的空白项目，将创建的项目里面的文件放进5+App项目中，新建项目什么都不动，路由模式：history, 直接npm run build打包

打包之后直接打开时dist里面的index.html,可以发现网页是空白的，控制台报错

再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的

企业微信截图_16736837015808.png

而在5+App需浏览器能直接打开网页，所以我们需要改打包后的路径，只需要在vue.confing.js文件中添加publicPath: './'

// vue.config.js 
module.exports = { 
    publicPath: './', 
}

此时重新打包直接打开dist/index.html文件还是会缺少东西，需修改路由的模式，将history改为hash

// vue2:
// router/index.js 
const router = new VueRouter({ 
    mode: 'hash', 
    base: process.env.BASE_URL, routes 
})

// vue3:
// router/index.ts 
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

因为是整个项目放在5+App项目，还需更改manifest.json文件中的路径，基础配置修改应用入口页面地址dist/index

最后使用HbuilderX进行常规打包，这边是使用hbuilderx提供的测试正式进行打包的，有条件的可以自己生成证书打包

总结：