Vue3 打包通过相对路径访问空白的解决办法

参考

• vue3.0以上关于打包后出现空白页和路由不起作用
• 配置参考

步骤

1. /vue.config.js 配置打包路径，因为是相对路径访问，所以配置 publicPath 为空或 “./”

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 修改端口号：https://blog.csdn.net/qq_39313596/article/details/83544745
  devServer:{
    port: 8081
  },
  // https://cli.vuejs.org/zh/config/#publicpath
  publicPath: ""

})

2. /src/router/index.ts 将默认路由类型 createWebHistory 改为 createWebHashHistory 路由

import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory } from 'vue-router';
const router = createRouter({
	// history: createWebHistory(process.env.BASE_URL),
	history: createWebHashHistory(process.env.BASE_URL),
	routes
});