vue 项目打包本地访问--history模式入坑

时间:2024-03-24 14:50:52

问题重现:vue2.x 版本router去掉url中#,即history模式,打包后,http-sever启动服务访问不出页面?
history模式的设置如下

const router = new Router({
  mode: 'history', // 去掉url中的#
  ...
  });

http-sever启动服务
1、http-server安装及运行
2 、http-server 运行打包好的文件
win+R->输入 cmd 打开doc窗口,进入打包的文件的目录下,输入http-server启动服务,浏览器中访问地址,即可访问。
一切准备就绪,咦!!!出不来,为什么呢?
对了,不用怀疑你的操作有问题。

问题1:router配置有误,缺少base的配置
问题2:启动http-server的目录不对

那么怎样才是正确的姿势呢?

const router = new Router({
  mode: 'history', // 去掉url中的#
  base: '/wedoH5pay/',  

router中base的配置和你在vue.config.js(vue-cli 3中的配置文件)配置的baseUrl一样,注意router中的base有两个“/”哦
vue 项目打包本地访问--history模式入坑

这样问题1 就解决了,接下来解决问题2
vue 项目打包本地访问--history模式入坑
将你打包的文件从你的工程中拷贝出来,比如我是放在 E:/test这个文件夹下,然后就是启动服务了,看下图:
vue 项目打包本地访问--history模式入坑

好了,见到光明了。