解决vue3打包之后dist文件夹下index.html不显示的问题_vue3 为什么配置 打包 dist index.html

1、当我用vue3的脚手架生成一个项目，npm run build打包成功之后，结果却显示出了空白页，按f12检查了一下报错，如图所示：

说是我的js文件和css等文件的路径找不到，网上搜索发现是因为vue-cli3简洁了许多，没有了配置文件，默认公共路径是'/'，所以需要自己创建配置文件去更改路径，配置文件只能在项目的根目录下创建（跟src文件平级），并且文件的名字只能是vue.config.js，然后在这个文件里面加上下面的代码即可：

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

（网上还有方法是全局搜索assetsPublicPath改assetsPublicPath：' ./ ' 的，但因为压根没有配置文件所以根本搜不到，自己创建vue.config.js加入assetsPublicPath也没有成功）

2、之后重新打包，发现又出了新的问题，说未找到文件：

按了f12去查看错误，发现是路由跳转的问题

 又去网上搜索一番，解决方法均是更改路由模式，把mode: 'history'改为mode: 'hash'，我改了，无果，而且发现导出路由的方式也不一样，之后又咨询同事帮助，发现vue2与vue3的路由配置方式也不同，参考文档vue3的路由文档：Different History modes | Vue Router (vuejs.org)https://router.vuejs.org/guide/essentials/history-mode.html

应该在router文件夹下的index.js里这样改：

const router = createRouter({
  //改这个方法createWebHashHistory(是hash模式)
  history: createWebHashHistory(),//而createWebHistory()方法则为history模式
  routes
})

不过记得用的时候要先引入一下：

import { createRouter, createWebHistory } from 'vue-router'