vue3项目打包后页面空白（vue3.11版本）

首先，如果想要打包后，直接打开index.html页面查看效果，就只需要修改vue.config.js文件，找不到这个文件怎么办呢？去项目的根目录，自己新建一个vue.config.js文件，与package.json同级。创建后输入以下代码：

module.exports = {
    publicPath:'./'
}

重新打包，就可以直接点击index.html查看效果了。

如果想要把项目打包上线后查看效果，就进入router文件夹，修改index.js文件，在 new VueRouter中加入以下一行代码：

base:'/dist'

全部内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    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(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  base:'/dist',//此处为打包后的文件夹名
  routes
})

export default router

以上就是解决vue3打包后出现页面空白的解决办法，关于更多vue3打包上线的坑，可以查看这篇博客：
vue3.11打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）