vue3 seo prerender-spa-plugin swiper6 vue-router4 build 打包空白 图片压缩

版本依赖

vue3、vue-cli4、 vue-router4、swiper6、prerender-spa-plugin3、image-webpack-loader7

  "dependencies": {
    "core-js": "^3.6.5",
    "image-webpack-loader": "^7.0.1",
    "prerender-spa-plugin": "^3.4.0",
    "swiper": "^6.8.4",
    "vue": "^3.0.0",
    "vue-router": "4.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  }

vue-router 4 打包后路由不显示，浏览器一片空白的问题

1. 路由未设置成 hash 模式，将路由设置成哈希模式

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(process.env.VUE_APP_ROUTER),
    routes: [...]
})
export default router

2. 忽略 ，错误很蠢，但也不排除

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

3. 引用组件文件时没加 vue后缀

   调试时不会报任何错，build 后页面全空白 ，浏览器后台还会报错

   解决：路由引用组件加上vue后缀

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
    path:'/', 
    name: 'moblie',
    component: ()=> import('../page/Moblie.vue')
    // ../page/Moblie 不加 .vue 就会有这个问题
}]
const router = createRouter({
    history: createWebHashHistory(process.env.VUE_APP_ROUTER),
    routes
})
export default router

4.路由设置 base 路径的问题

export default new Router({
  m