vue3打包过程中常见问题

项目场景:

关于如何将vue项目打包

通过将npm run build 将vue项目打包


问题描述

vue打包过程问题

在这里插入图片描述
vue采用单页面文件形式,打包之后index.html是vue项目打包之后的页面


问题1:运行index.html内容为空:

		**控制台报错信息**

在这里插入图片描述

原因:由于项目打包默认路劲从‘ / ’开始,要改为‘ ./ ’

修改文件vue.config.js中添加以下代码:

publicPath: './'

重新打包打开index.html文件,页面访问成功
在这里插入图片描述

问题2:index.html页面正常访问,但路由跳转页面不能正常访问或者刷新后页面找不到文件:

问题分析:由于项目打包成功且index.html可以正常访问,问题不是项目打包的原因,而出现路由跳转的时候查找不到路径,通过官方文档了解到,是因为vue中router采用了history模式,配置文件:router/index.js文件下

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
...
路由配置信息
...
const router = createRouter({
  history: createWebHistory(),    //原代码
  routes
})

报错信息如下:
在这里插入图片描述

此时我们需要将histroy模式改为hash模式,将路径地址转换为hash模式,路由跳转页面便可以正常访问

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
...
路由配置信息
...
const router = createRouter({
  history: createWebHashHistory(),    //原代码
  routes
})

histroy与hash模式的区别

histroy模式下路径地址:file:///D:/demo/test01/dist/index.html
hash模式下路径地址:file:///D:/demo/test01/dist/index.html#/

总结:

vue项目打包过程总结:

  1. 将vue.config.js项目中打包路径修改为根路径:‘./’
  2. 将router/index.js路由文件histroy修改为hash模式
  3. 打包文件

打包之后项目的运行:

1.安装http-server,使用node命令全局安装

cnpm install http-server -g
  1. 进入打包文件(默认为:dist) cd dist
  2. 运行命令:http-server
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值