解决vue3打包之后dist文件夹下index.html不显示的问题
1、当我用vue3的脚手架生成一个项目,npm run build打包成功之后,结果却显示出了空白页,按f12检查了一下报错,如图所示:说是我的js文件和css等文件的路径找不到,网上搜索发现是因为vue-cli3简洁了许多,没有了配置文件,默认公共路径是'/',所以需要自己创建配置文件去更改路径,配置文件只能在项目的根目录下创建(跟src文件平级),并且文件的名字只能是vue.config.js
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'
更多推荐
所有评论(0)