Vue history/hash模式打包页面空白处理
相信很多新手在history/hash模式下被坑的很惨,处理history模式下页面打包空白,经测试ok一、vue项目携带一个#会对开发造成一定的影响:1、微信三方登录回调地址,有#号时,接收不到code参数2、微信H5支付的回调地址,不允许有#3、App分享,处理特殊字符时,可能会对#进行编译4、有点影响美观现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大...
相信很多新手在history/hash模式下被坑的很惨,处理history模式下页面打包空白,经测试ok
一、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/
export default new Router({
mode: 'history',
base: '/project-name/', //如果项目根目录不为域名,则添加该行
routes: [{}]
})
2、修改config/index.js文件
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/project-name/', //添加根目录,如果域名为根目录,则为 '/'
更多推荐
所有评论(0)