关于Vue3打包后dist包中index.html显示空白

563 阅读1分钟

今天朋友发我一个vue3的文件说,打包以后出现白屏,记录一下 看下打印内容

image.png

如果没有vue.config.js文件,就在根目录下创建一个

image.png

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production'? './': '/',
  outputDir: "dist", // 输出文件目录
  lintOnSave: false, // eslint 是否在保存时检查
  assetsDir: 'static', // 配置js、css静态资源二级目录的位置  
  productionSourceMap:false,//减少包大小,也可以加密源码
})

修改router中的index.js
添加 createWebHashHistory 替换 history 中的 createWebHistory

import { createRouter, createWebHistory, createWebHashHistory  } from 'vue-router';
import routes from "./routes";

const router = createRouter({
	//history: createWebHistory(process.env.BASE_URL),//默认时
	history: createWebHashHistory(process.env.BASE_URL),//修改后
	routes
})
export default router;