问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/c

nginx + uwsgi 部署 Django+Vue项目 windows 本地 DNS 解析 文件路径 C:\Windows\System32\drivers\etc 单机本地测试运行方式,调用django第三方的wsgifef单机模块,性能很低 python3 manage.py runserver 0.0.0.0:8000 使用uwsgi 去启动django项目,支持并发更多 准备前后端代码 先从vue前端搞起 解决node环境 更改vue发送请求的接口地址, 这个vue发送的地址,应该是

图文记录云服务器上部署需要nginx反向代理的vue项目: 一.先登录并购买云服务器,根据自己需求购买,此处不详细介绍: 二.登录后如下图,点击进入云服务器界面: 三.在云服务器界面点击管理,进入管理界面,操作如下: 四.如未安装操作系统(购买后默认是没安装的),点击进入安装操作系统界面,操作如下: 五.按下图1到4步骤操作,进行操作系统的安装,安装完毕后点击图中第4步所指链接进入操作系统(此处为宝塔面板): 六.进入宝塔面板,先安装运行环境.ftp等软件,否则无法继续后续操作: 七.安装软件界

前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载. 但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/ba

vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中修改 方法一: location /{ root /data/nginx/html; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } } 方法二:vu

摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Router,HTML5 History 模式,因为history模式刷新页面会出现404>,作者: DevFeng . vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路

背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/History_API 安装nginx 参考:https://www.cnblogs.com/jiangwangxiang/p/8481661.html 1.下载nginx http://nginx.org/en/download.html        

这是一个比较全的nginx配置说明:新手可以先忽略,直接往下看:https://www.cnblogs.com/findbetterme/p/11289273.html nginx官网下载地址:http://nginx.org/en/download.html 下载稳定版 双击nginx.exe启动 ctrl+alt+delete  打开任务管理器 发现有nginx,证明nginx已经启动了 打开命令行工具win+cmd cd到nginx.exe所在的文件夹 有时候,我们在启动之前可以检查下配置

一.购买服务器并远程连接 1.购买服务器和域名 可以选择阿里云或者是其他的厂商的服务器.然后会获得服务器ip地址,用户名和密码. 购买域名,将域名绑定到ip地址上. 2.下载xshell,winscp xshell和winscp都是可以用来操控服务器的,比如上传上传文件,修改文件权限等. 一个是有图形化的操作,一个是用代码操控. 我两个都下了,因为我怕xsehll没能操控好的地方,用可视化图形来操控. 连接服务器 打开xshell 二.安装node 参考这篇文章:https://blog.csd

开启HTML5 History Mode后,尤其需要server端的支持,官方文档里就有介绍:(传送门: https://router.vuejs.org/zh-cn/essentials/history-mode.html) [root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf server { listen ; server_name testwx.wangshibo.com; roo

最近跟着某机构的教学视频敲了一遍vue项目,但是在windows环境下部署的时候就懵逼了放到nginx下正常跑没问题,但是刷新之后就报404错误 前端项目构建vue 脚手架版本 是@vue/cli 4.3.1,构建项目之后没有config.js文件.无奈按照网上说的最简单的办法 就是将router模式改为默认的hash模式不使用history模式,然后部署到nginx下就能正常刷新了 server { listen 8067; server_name localhost; #proxy_set_

翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有进入封装的请求体中,让人很费解,也有没有打印错误. 1.本地刷新子页面,地址栏路由状态OK,页面也能正常获取数据 2.部署到测试服务器上,刷新就唧唧了 注:首先,说明下vue-router的默认hash模式——使用URL的hash来模拟一个完整的URL,当URL改变时,页面不会重新加载.但是这种ha

vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面.2.history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法.需要特定浏览器支持history模式,会出现404 的情况,需要后台配置.3.hash模式下,仅hash符号之前的内容会被包含在请求

最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式,一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染.简单介绍下两种模式: hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算).比如这个 URL:http://www.abc.com/#/

阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因为配置nginx的时候会需要这两个东西 PCRE(Perl Compatible Regular Expressions) 是一个Perl库,包括 perl 兼容的正则表达式库.nginx 的 http 模块使用 pcre 来解析正则表达式,所以需要在 linux 上安装 pcre 库,pcre-d

说明 使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错: Invalid Host header(无效主机头) 分析 检查 Nginx 的 nginx.conf 配置,如下: upstream sail{ server 127.0.0.1:8080; } server { listen 8081; server_name localhost; location / { root html; index index.html index.

旧文从语雀迁移过来,原日期:2021-09-13 前言 我们知道,vue 单页面应用打包出来是静态资源,一般需要 nginx 或者其他服务器访问:当如果 Vue Router 是采用 History 模式时,又会有额外的配置.这里记录一下完整配置过程中的每一个细节. 静态资源 我们首先要配置好如何访问我们打包出来的静态资源. 基本配置 当 URL 无需前缀时,基础的配置是这样的: server { listen 80; server_name testhistory.com; location

一.开发环境使用Ajax请求,报错  网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 changeOrigin:true, pathRewrite:{ '^/api':'' //这里理解为用api代替target中的地址 } } } 配置完后,请求依然报错,大致是https证书的问题 [HPM] Error occured while trying to proxy request /xxx

咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. 咱们来看看小白的回答. 小白回答:hash模式url带#号,history模式不带#号. 回答总结:这个回答其实和没有回答是一样,百度一下都知道了,官网文档也有,如果这样回答就能通过,那么那个面试官问这个问题又有什么意义呢?其实这个问题的意义是考验你的开发经验,与实际场景的应用和与后端人员的配合.

目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜

在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://local