vue打包之后出现空白页的原因以及解决方式

发布时间：2023-04-23 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

路由模式 history

新建项目什么都不动，路由模式：history, 直接npm run build打包

打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。

vue打包之后出现空白页的原因以及解决方式

再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/'

vue打包之后出现空白页的原因以及解决方式
vue打包之后出现空白页的原因以及解决方式

那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath

vue打包之后出现空白页的原因以及解决方式

我们只需要在和package.json同级的地方新增一个vue.config.js文件，将路径修改为相对路径'./'

// vue.config.js
module.exports = {
    publicPath: './',
}

再次打包, 页面不是空白了，但还有很多东西没显示完，正常的页面是这个样子

vue打包之后出现空白页的原因以及解决方式

打包之后是这样子

vue打包之后出现空白页的原因以及解决方式

点击About进行路由跳转是这样子

vue打包之后出现空白页的原因以及解决方式

路由模式 hash

改一下路由模式，找到router/index.js文件, 将history修改为hash, 再进行打包

// router/index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

页面显示和路由跳转就都可以了
vue打包之后出现空白页的原因以及解决方式vue打包之后出现空白页的原因以及解决方式

总结

1. 修改路径

// vue.config.js
module.exports = {
    publicPath: './',
}

2. 更改路由模式

// router/index.js
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

路由模式拓展

路由的hash和history模式的区别

  1. 首先hash模式url带#号，history不带#号
  2. hash模式前端路由修改的是hash值(#及以后)，对后端没影响，因此改变hash也不会重新加载页面，比如修改为了不存在的#123页面，页面不会跳转;
    history模型刚好相反，没有对应的页面就会出现404

打包路由选择

标签 , ,