路由模式 众所周知,浏览器下的单页面应用的路由模式有下面两种: hash 模式和 history 模式.hash 模式通用性好,而且不依赖服务器的配置,省心省力,但是缺点是不够优雅.相比于 hash 模式来说,history 模式则更加美观. 但是,history 模式同样会有一个问题,就是当页面刷新时,如果没有合适的配置,会出现页面 404 的错误.因此需要额外的服务器配置,对于找不到的 url,将首页 html 返回. 接下来,咱们以 nginx 为例,来说说 history 模式时需要进行…

这篇文章主要分享一下通过HTML5的history API的时候,使用NodeJS后端应该如何配置,来避免产生404的问题,这里是使用的express的框架,主要是通过connect-history-api-fallback这个中间件来实现的! 前言 这里使用vue-router来实现的单页应用为例,访问http://cnode.lsqy.tech,进入首页,点击下面的tab栏,一切都是很正常的,但当这时候你 ctrl+command+R 或 点击浏览器的刷新按钮 或 在地址栏上再敲一下回车,总…

使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这个静态资源会报404) outputDir: 'dist',//打包后的目录名称 assetsDir: 'static'//静态资源目录名称 } router.js export default new Router({ mode: 'history',//配合nginx本地才能正常的使用histo…

vue-router mode=history本地开发环境配置 解决方法1.修改webpack的的devServer配置项(devServe存在于,rvue-cli2在webapck.config.js,vue-cli3在vue.config.js),新增historyApiFallback: true webpack文档上也有些:https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback module…

1.安装nginx 先到nginx官网下在nginx http://nginx.org/en/download.html 将下载好的文件解压出来修改文件名为 nginx ,然后拷贝到C盘下,目录如下: 运行 nginx start nginx 验证 在浏览器中输入 localhost 访问即可,如出现以下页面,即安装成功 2.安装 OpenSSL 下载OpenSSL http://slproweb.com/products/Win32OpenSSL.html 下载完成安装到 C:\OpenSSL…

1.安装依赖包 yum -y install pcre-devel openssl-devel zlib-devel 2.下载nginx安装包到服务器上,当前使用版本nginx-1.15.5.tar.gz当前使用版本 wget http://nginx.org/download/nginx-1.15.5.tar.gz .tar.gz cd nginx-.tar.gz ./configure --sbin-path=/usr/local/sbin --with-http_stub_status_m…

前两天看到公司window服务器上面有个nginx在跑,重启服务器后没有自动启动,需要手动运行nginx,甚是麻烦呀 上网找了一下关于将nginx配置为系统服务并且开机自动启动的解决方案,这里mark一下: 1.下载WinSW(window service wraper) 地址:https://github.com/kohsuke/winsw/releases 里面有不同版本,同时分32位(WinSW.NET2.exe)和64位(WinSW.NET4.exe),请按照自己的服务器属性下载 2.将…

1.路由默认是带#的,有时我们感觉不美观,就使其变为history模式,也就没有#字符 2.# 如果找不到当前页面(404),就返回index.html,重新分配路由 location ^~/prodTest/ { root C:/Users/Administrator/Desktop/gavinApp/testVue/my-project; try_files $uri /; expires 2h; } 3.实例:如果用户请求路径为: http://localhost:8070/prodTes…

目前web开发 使用一般前后端分离技术,并且前端负责路由.为了美观,会采用前端会采用h5 history 模式的路由.但刷新页面时,前端真的会按照假路由去后端寻找文件.此时,后端必须返回index(index.html)文件才不至于返回404. nginx 部署一个单页应用很简单: location / { root html; try_files $uri /index.html index.html; } root是web服务器目录,try_files 为文件匹配,先找真实的地址($uri)…

1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下的一个叫phptest的文件夹下. 2. 为了防止打包上线引入文件的路径出错, 在vue.config.js文件配置publicPath (我使用的是vue-cli3.0, 2.0的也可以在配置文件中配置) 3.执行 npm run build 执行文件打包上线 4.在对应站点的目录下 phptes…