Vue 部署服务器白屏404问题

共计1391字,阅读大约5分钟。

采坑小达人自救

呸,真坑

[toc]


问题描述:

页面404调转 , 控制台 js css 找不到 , 但在生产环境却毫无问题 . 我猜你肯定不是部署到网站一级目录

图片[1] | Web Stack | Vue 部署服务器白屏404问题 | 一个栈


答: 这与路由路径有关


首先明白路由模式

一、hash模式

显示的网路路径中会有 “#” 号,有一点点丑。这是最安全的模式,因为他兼容所有的浏览器和服务器。

二、history模式

去 "#" , 但有点点点兼容问题 . 缺点 : 刷新 ,如果后端没有准备会直接请求服务器

三、abstract模式

适用于所有JavaScript环境,例如服务器端使用Node.js。如果没有浏览器API,路由器将自动被强制进入此模式。


解决问题

一、预指定路由父级路径

在 route.index.js 里 , 我这里指定了 history 模式 ,指定上级路径是 treasure

const router = createRouter({
  history: createWebHistory("treasure"), //这里是写站点二级以上目录
  routes
})

二、预指定资源路径

  • vue3以上 在项目根目录建 vue.config.js
module.exports = {

    publicPath: '/treasure/'
}

//treasure按你的站点目录改 , 多级可直接加 xxx/xxx/xxx
  • vue2 在 config/index.js 里指定
build: {
	assetsPublicPath: '/treasure/' 
}

三丶 后台配置

  • Nginx
location ^~/treasure
{
alias /www/wwwroot/www.yzg.life/treasure;
try_files $uri $uri/ /treasure/index.html;
index index.html;
}
  • Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

PS : 浏览器标题打印名字

在 router/index.js 下加规则 但要确保每个节点有 name 属性

router.beforeEach((to ,from ,next)=> {
  if (to.name) {
    document.title = to.name
  }
})
温馨提示:本文最后更新于2022-06-12 12:23:20,某些文章具有时效性,若有错误或已失效,请在下方留言或联系雅舍站长
© 版权声明
THE END
有所帮助就支持一下吧
点赞0当赏 分享
箴言区 抢沙发
头像
达瓦里希请发言...
提交
头像

昵称

取消
昵称表情代码图片