vue去掉#,history模式

一、vue项目携带一个#会对开发造成一定的影响:

1、微信三方登录回调地址,有#号时,接收不到code参数

2、微信H5支付的回调地址,不允许有#

3、App分享,处理特殊字符时,可能会对#进行编译

4、有点影响美观

现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。话不多说,开始去掉#吧。

二、去#的原理

vue把#当做自己的根目录,静态资源,比如图片。

去掉#后,要采用相对路径去引用,如果图片引用是在js内,则要采用require()方法进行引用。

去#后台渲染,请参考vue官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html

三、去掉#方法

1、首先判断产线项目是否放在域名根目录下

在router/index.js文件中,添加history模式

如果项目不在根目录下,比如产线项目根目录为 http://www.baidu.com/project-name/

 
  1. export default new Router({

  2. mode: 'history',

  3. base: '/project-name/', //如果项目根目录不为域名,则添加该行

  4. routes: [{}]

  5. })

2、修改config/index.js文件

 
  1. build: {

  2. // Paths

  3. assetsRoot: path.resolve(__dirname, '../dist'),

  4. assetsSubDirectory: 'static',

  5. assetsPublicPath: '/project-name/', //添加根目录,如果域名为根目录,则为 '/'

  6. }

3、去掉#,对项目的根目录造成影响,这是不可避免的,再次强调,确保静态资源文件路径正确。

四、Apache,Nginx等服务器部署vue项目请参考另一篇博客:

https://blog.csdn.net/bocongbo/article/details/83957206

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值