---- AI试用 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

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

前端开发 蚂蚁 5068℃ 0评论

nginx静态文件(css,js等)反向代理

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模式打包后页面为空白页的问题

喜欢 (62)or分享 (0)

(1)个小伙伴在吐槽
  1. 部署服务器后刷新404问题 https://fe.ecool.fun/topic/252525e4-0c4c-4e41-9279-41bc59f06f85
    蚂蚁2022-02-10 15:30