vue项目history路由的配置

一，前端配置

import { createRouter, createWebHistory } from 'vue-router';
const hash = createWebHistory();
const router = createRouter({history: hash,// base: "/cd/",routes: [...]
})

二，npm run build的页面

直接打开的话，只能打开index.html，然后刷新浏览器或者访问哪个页面时，就会报404了。官网原文这样说的：

当你使用 history 模式时，URL 就像正常的 url，例如 `http://yoursite.com/user/id`，也好看！不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 `http://oursite.com/user/id` 就会返回 404，这就不好看了。所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 `index.html` 页面，这个页面就是你 app 依赖的页面。

要想在本地看到打包后的项目。就需要使用nginx来作为服务器。

三，nginx的配置

按照官网所言：

HTML5 History 模式 | Vue Router (vuejs.org)

只需要nginx配置即可：

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

于是我本地的nginx配置：

    server {listen       3057;server_name  127.0.0.1;location / {root   C:\Users\Administrator\Desktop\h5\CJST_ZHST_h5page_REPO\dist;这里配置项目的根目录index  index.html index.htm;  //这里配置入口文件的try_files $uri $uri/ /index.html;//主要就是增加了这一行代码，意思是如果 URL 匹配不到任何静态资源，则应该返回同一个 `index.html` 页面}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

配置好之后，cmd进入到nginx的安装目录，运行nginx -s reload重启nginx。

这样之后就可以在本地查看自己打包之后的项目了。

如我的就是：127.0.0.1:3057

vue项目history路由的配置相关推荐

在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
在nginx上部署vue项目(history模式)--demo实列；
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇关于在nginx上部署vue项目(history模式) 但是 ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
history模式 nginx配置_nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理问题1思考: vue-route ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
Vue Router history模式的配置方法及其原理
转载地址:https://segmentfault.com/a/1190000019391139 vue-router分为hash和history模式,前者为其默认模式,url的表现形式为http:/ ...
vue 项目中的打包配置
当我在使用vue 项目的时候, 我们可能会打包一下线上环境发布, 一会又在本地启动, 因为线上的环境要放在站点根目录下的二级目录中, 而我们的测试环境只是在 ./ 的根目录下, 所以, 当我要打包的时 ...
Vue项目History模式404问题解决
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...
vue项目搭建以及环境配置
一.环境要求:node 1. 下载链接:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功(node-v) 3.配置镜像 : npm i ...
vue项目nginx反向代理配置
1.nginx配置文件设置 #开始配置我们的反向代理 location /prod-api{ rewrite ^/prod-api/(.*)$ /$1 break; include uwsgi_par ...

vue项目history路由的配置

一，前端配置

二，npm run build的页面

三，nginx的配置

vue项目history路由的配置相关推荐

最新文章

热门文章