Vue 去除地址栏的 # 号与在手机浏览Vue的web项目

最新推荐文章于 2023-09-12 10:39:35 发布

滑稽的

最新推荐文章于 2023-09-12 10:39:35 发布

阅读量405

点赞数

whqbg

本文链接：https://blog.csdn.net/heiyanmin/article/details/106003991

版权

Vue 去除地址栏的 # 号与在手机浏览Vue的web项目

一、Vue去除地址栏 # 号

/*.实例化VueRouter实例          这是在封装router路径时候*/
const router = new VueRouter({  /*注意，我这里的VueRouter ，是我import router的时候自己定义的名字*/
  routes: routes,
  /!* 将 默认的哈希 hash 模式 换成 history 模式，去掉地址栏中的 /# 号 *!/
  mode: 'history'
});

如果你把路径封装在了JS文件里，这样写：

export default new Router({
	mode: 'history',         /*mode: 'history'，去掉地址栏中的#号*/
	routes: RouteList
	})

二、在手机浏览Vue的web项目

首先关闭计算机防火墙

在这个 webpack.config.js 文件里，找到 devServer

devServer: {
  /*disableHostCheck:true,  */ /*禁止默认检查hostname*/
  host: '192.168.0.107',
  port: 8016,
  open: true,
  proxy: {
    '/api/': {
      target: 'http://192.168.0.107:8080',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  historyApiFallback: {
    index: url.parse(options.dev ? '/assets/' : publicPath).pathname
  }
},

将host属性值 ‘127.0.0.1’ 改为你目前所在网络的 IP 值，我的是192.168.0.107，上面的我已经修改完了
并且，将target的属性：“http://127.0.0.1:8080” 也一并修改为 ‘http://192.168.0.107:8080’
这是拿我的举例子，上面的我已经修改完了
并且要注意，你也要将你的后端的地址换成 ‘‘http://127.0.0.1:8080’’
,达成前端与后端的一致，不然你只能看，不能实现功能，无法与后端交流，上面的我已经修改完了