处理 vue history模式打包后页面为空白页的问题

前端开发 蚂蚁 126℃ 0评论

https://www.qzroc.com/index.php/archives/78/
场景如下:

微信或者第三方登录回调地址,有#号时,接收不到code参数,或者处理起来非常复杂
微信H5支付的回调地址,不允许有#
App分享,处理特殊字符时,可能会对#进行编译
开发App嵌入式页面时,与框架字段兼容性取值异常

解决步骤:

在vue根目录下创建vue.config.js 文件,内容如下

// product为工程名
module.exports = {
    publicPath: '/product/',
    outputDir: 'product'
}

修改router.js 文件

// product为工程名
const router = new VueRouter({
  mode: 'history',
  base: '/product/',
  routes
})

联合后端同事,修改Nginx配置

// product为工程名
location /product {
    index  index.html index.htm;
    try_files $uri $uri/ /product /;
}

转载请注明:有爱前端 » 处理 vue history模式打包后页面为空白页的问题

喜欢 (23)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址