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
});