vue 在nginx下页面刷新出现404问题,解决在nginx下页面加载了js但是页面显示空白问题解决

一、vue 在nginx下页面刷新出现404

1、如果是在根目录则配置如下

location / {
  root  /;
  index index.html;
  try_files $uri $uri/ /index.html
}

2.如果是有特定目录

location /xx/xx/ {
  root  /;
  index index.html;
  try_files $uri $uri/ /xx/xx/index.html
}

附上官方vue-router的说明:https://router.vuejs.org/zh-cn/essentials/history-mode.html

二、vue打包后发布在nginx下,页面加载了js但是页面显示空白

这个问题是因为在配置router的时候没有带上自己的项目的目录,在配置router那里加上项目路径就可以了

1.直接写在router上

export default new Router({

  mode: 'history',
  base: '/xx/xxx',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: signIn
    }
  ]
})

2.写成全局变量在配置文件里,以便发布

export default new Router({

  mode: 'history',
  base:env.base_build_path,
  routes: [
    {
      path: '/',
      name: 'Login',
      component: signIn
    }
  ]
})

注:这个env.base_build_path就是配置文件里的一个全局变量,也是项目路径

Logo

前往低代码交流专区

更多推荐