把vue项目打包成安卓安装包apk

原创已于 2024-10-24 16:53:24 修改 · 2.8k 阅读

31 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#android #uni-app #前端 #vue.js #1024程序员节

于 2024-10-24 14:41:19 首次发布

对于一些简单的安卓app功能可以使用自己更熟悉的vue转apk来快速实现。

1.下载HBuilder X

2.准备好自己的vue项目

这里使用的是二维码扫码功能的页面，只有ScanCoder.vue是自己写的扫码页面

3.把vue项目打包

npm run build

得到dist文件夹

没有static文件夹也不要急，下面配置会解释原因，

注意这里尝试打开index.html看看你的页面是否能正常显示：这里一般是资源路径问题，相信各位吴彦祖都能快速解决呢，如果不能请按照以下配置修改部分vue项目文件，

配置文件vue.config.js设置

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 只需要在原有的语句的基础上加上这一句
  publicPath: "./",
  /* 输出文件目录：在npm run build时，生成文件的目录名称 */
  outputDir: "./dist",
  /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
  assetsDir: "static",
  /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
  productionSourceMap: false,
  /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
  devServer: {
    /* 自动打开浏览器 */
    open: true,
    // proxy: {
    //   '/api': {
    //     target: 'http://localhost:3000', // 这里是你本地服务器的地址
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': '',
    //     },
    //   },
    // }
  },
});

如果index.html还是打不开修改一下index.html里资源的相对路径把 ./statict/ 删除

原来的src：