vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
一、vue 在nginx下页面刷新出现404
在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是没有表达完整,可能会让比较急于解决这个问题的人简单复制却始终解决不了问题
nginx正确的配置:
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上
如果直接是根目录就将/xx/xxx改成/
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就是配置文件里的一个全局变量,也是项目路径
(只作为自己的记录,有需要的人做为参考)
vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决的更多相关文章
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- 解决angular2页面刷新后报404错误
如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- [Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件,制作表格的下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- vue中加载three.js的gltf模型
vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二. ...
- 无阻塞加载js,防止因js加载不了影响页面显示
浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...
- Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同
我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...
- 根据打开页面加载不同Js
根据打开页面加载不同Js //根据打开页面加载不同JS $(document).ready(function(){ var href = document.URL; /*获取当前页面的URL*/ if ...
- 通过sessionStorage来根据屏幕宽度变化来加载不同的html页面
因为项目需要,分别写了移动端和PC端的两个html页面,现在需要根据不同的屏幕宽度来加载对应的页面. 先说一下本人的思路-- 刚开始我直接在加载页面的时候判断屏幕宽度,然后加载相应的页面,大家是不是也 ...
随机推荐
- 吴恩达-机器学习+Logistic回归分类方案
- PHP_Code_Challenge 1~30
1. 1wMDEyY2U2YTY0M2NgMTEyZDQyMjAzNWczYjZgMWI4NTt3YWxmY= <?php error_reporting(0); require __DIR__ ...
- Java之再初识二
本篇博客将继续介绍Java基础知识 1.Java包含哪些数据类型 2.Java基本数据类型转换包含哪两类 3.为什么需要包装类 4.int与integer有什么区别,它们之间如何相互转化的 5.逻辑运 ...
- 智慧矿山-选矿工艺数字 3D 可视化
前言 现代科技和工业的发展对矿物原料的要求越来越高,直接开采的原矿石往往达不到标准,而原矿通过选矿加工后则可以满足要求.选矿技术在冶金.煤炭.化工.建材和环保等部门都得到应用,对国民经济的发展意义重大 ...
- VS2017 Xamarin开发Android时首次部署完成后直接闪退
项目属性切换到Android选项,在打包属性上有一个[使用共享运行时]的选项要取消勾选,默认打钩时apk文件比较小,但程序无法运行起来. 取消后安装包一小变成几十M,这个目前好像没什么好的解决办法,毕 ...
- Centos-rpm二进制包安装-rpm
rpm 软件包管理器 rpm包命名规范 mysql-community-server-5.7.21-1.el7.x86_64.rpm 软件名称 mysql-community-server 软件版本 ...
- Vue路由Hash模式分析
Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...
- 076 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 01 初识面向对象 01 Java面向对象导学
076 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 01 初识面向对象 01 Java面向对象导学 本文知识点:Java面向对象导学 说明:因为时间紧张,本人 ...
- 【题解】CF1207E XOR Guessing
Link 这是一道交互题. \(\text{Solution:}\) 观察到猜的数范围只有\(2^{14}.\) 我第一次想到的方法是,我们可以确定系统选择的两个数的异或和,用这个异或和去穷举所有目标 ...
- 加快ASP。NET Core WEB API应用程序。第3部分
下载source from GitHub 对ASP进行深度重构和优化.NET Core WEB API应用程序代码 介绍 第1部分.创建一个测试的RESTful WEB API应用程序. 第2部分.增 ...