Hbuilderx:Vue项目打包apk打开首页空白问题

        可能是打包时没有修改前端项目默认的公共基础路径,或者是路由模式不支持。

        以Vue3项目为例,

1. 修改默认的公共基础路径

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base:"./",//公共基础路径配置
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2. 修改为Hash路由模式

        Vue3项目,如果添加了Vue-Router依赖,默认生成的代码中是history模式,要将其改为hash模式。

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  //改为hash模式
  history:  createWebHashHistory(import.meta.env.BASE_URL),//createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

        暂时发现这两个原因,欢迎小伙伴们补充哈。

你可能感兴趣的:(Vue,vue.js,前端,javascript)