vue3.0—vue/cli3打包空白页报错后全部问题处理

新建vue.config.js文件，添加配置项：publicPath: ‘./’
新创建的vue.config.js文件(和package.json同级) 复制以下代码

module.exports = {
  // 公共路径(必须有的)
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // 静态资源存放的文件夹(相对于ouputDir)
  assetsDir: "assets",
  // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装)
  lintOnSave:false,
  // 我用的only，打包后小些
  productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建

  devServer: {
      // open: true,  // npm run serve后自动打开页面
      // host: '0.0.0.0',  // 匹配本机IP地址(默认是0.0.0.0)
      // port: 80, // 开发服务器运行端口号
      proxy: null,
  },
  pwa: {
      iconPaths: {
        favicon32: 'favicon.ico',
        favicon16: 'favicon.ico',
        appleTouchIcon: 'favicon.ico',
        maskIcon: 'favicon.ico',
        msTileImage: 'favicon.ico'
      }
    }
  // configureWebpack: {
  //     externals: {
  //       'AMap': 'AMap' // 高德地图配置
  //     }
  // }
  // pages:{
      
  //     draw:{
  //         entry:"",
  //         template:"./src/views/draw.vue",
  //         filename:"draw",
  //         title:"draw"
  //     },
  //     cancel:{
  //         entry:"",
  //         template:"./src/views/cancel.vue",
  //         filename:"cancel",
  //         title:"cancel"
  //     }
  // }
}

然后去router下的index.js路由用hash模式

第一种方法

export default new Router({
  // mode: "history", 
});

如果index.js没有上面这行代码 证明是已经集成了 就需要改一下引入方法
第二种方法
路由index.js引入的 createWebHistory 修改为 createWebHashHistory 以下为正确写法

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

export default router

然后运行 npm run build 就不会出现页面空白和报错了

我也是一步一步摸索出来的,希望大家感觉对自己有帮助,一键三连哈 谢谢