Vue路由History模式打包后页面空白,刷新404

项目的入口文件index.html直接在服务器访问地址的根目录下,即项目独占一个端口

vue中配置保持不变

nginx中配置如下:

server {
        listen      8899;
        server_name localhost;
        location / {
	       try_files $uri $uri/ /index.html;
        }
    }

  

第二种就是

# 打包配置 config-index.js 修改路径:

assetsPublicPath: ‘./‘;

# 前端路由配置 router.js:

const router = new VueRouter({
    mode: ‘history‘,
    base: ‘/hello‘,
    routes
})

这里一定要一个加一个base;与项目子级目录名同步

nginx 配置:

server {
    listen 8088;
    server_name xxx.com;  # localhost修改为您证书绑定的域名。

    location / {
    }

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

  

 以上只是针对项目放在子级目录的情况,刷新404的问题待解决

原文地址:https://www.cnblogs.com/lan-cheng/p/12127620.html

时间: 2024-07-29 18:06:56

Vue路由History模式打包后页面空白,刷新404的相关文章

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:http://yoursite.com/#/user/id. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模

解决vue单页面跳转返回后页面不刷新的问题

一.问题:在vue项目中通过location.href跳转到第三方页面,然后点击浏览器返回按钮回到自己的页面,用nginx起服务页面不刷新,在用node起服务中页面是正常刷新的: 二.产生该问题的原因:微信浏览器对页面进行缓存: 三.解决方案: 1 window.onpageshow = null; 2 window.onpageshow = function(event){ 3 location.reload() 4 } 5 window.location.href = 'https://ww

vue项目打包之后页面空白解决办法

之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPublicPath 在config/index.js里面,有个 assetsPublicPath 属性,源码是'/',修改成'./',加个点 assetsPublicPath: '/',二.路由模式将histroy改成hash模式,起初 mode:'history' const router = new

react项目打包后路径找不到,项目打开后页面空白的问题

使用 npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题: 解决办法:在package.json设置homepage 原文地址:https://www.cnblogs.com/lan-cheng/p/10541606.html

记录下自己VUE项目用Hbuider打包后启动白屏问题

刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSu

vue.js - 解决vue-cli打包后自动压缩代码

当我们用vue脚手架做完项目后,npm run build打包之后, 有没有查看源码,全是压缩好的.但是我就不想让它压缩,该怎么办呢? 困惑了几天,查了各种资料.终于终于... 来,上干货: 首先,我们得了解一点点webpack的知识. webpack中压缩js 的插件叫 uglifyjs-webpack-plugin, 压缩css 的插件叫 optimize-css-assets-webpack-plugin 然后我们找到/build/webpack.prod.conf.js 文件, 然后你会

vue打包后显示空白正确处理方法

在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. 正确的方法步骤是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 转载:http://www.wei86.cn/article/1/cid/3.html

VUE的history模式下除了index外其他路由404报错

location / {index index.html;root /dist;try_files $uri $uri/ /index.html;}try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配.然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 原文地址:https://blog.51cto.com/14207669/2431296

vue打包后显示空白的路径问题

需要修改的地方有三处. 第一处在build/utils.js添加  publicPath: '../../' 第二处config/index.js添加assetsPublicPath: './',这个看图.注意是在build下 第三处在src/router/index.js里面修改mode然后就可以打开了. 原文地址:https://www.cnblogs.com/lywweb/p/8868295.html