build后的index.html是空白页面
使用vue-cli4脚手架工具后,vue项目结构发生了变化,许多以前的设置也改变了,最近在npm run build一个项目之后发现打开html是空白,点开控制台发现很多资源找不到。只需要改变vue.config.js文件中的publicPath即可,如图所示(直接改成 ./ 也可以)
打开页面无法使用路由
还是那个老问题,默认的路由模式是history模式,以前只需要注释掉路由配置文件中的mode: 'history'即可,现在倒好,路由长这个样子
添加一行mode: hash也无济于事,其实只是vue3中改变了路由创建模式,只需要修改import中的路由历史构建函数,选用hash模式即可
import {createRouter, createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})
export default router
之后运行npm run build,在dist文件中查看生成页面,打开就可以正常运行了