`
jiaoronggui
  • 浏览: 1327923 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
博客专栏
B7c2eb31-a8ea-3973-a517-d00141f39b89
项目管理软件-redmin...
浏览量:116417
4a63e153-250f-30f6-a051-97cfc67cb3d3
IT职业规划
浏览量:199306
社区版块
存档分类
最新评论

vue history模式下nginx部署

 
阅读更多

1、vue打包中,打包模式按照history模式,设置输出目录

 



 

2、nginx修改配置文件

	location /h5/ { #配置H5访问
		root /www/;
	    try_files $uri $uri/ @router;
		index index.html index.htm;
	}
	location @router {
		rewrite ^.*$ /h5/index.html last;
	}
 

 

  • 大小: 19.1 KB
1
0
分享到:
评论

相关推荐

    Vue项目部署Nginx配置文件 SSL

    # 处理 Vue 路由的history模式 } ``` 7. **错误页面处理**: - 你还可以配置自定义的错误页面,例如 404 或 500 错误。 ```nginx error_page 404 /404.html; error_page 500 /500.html; ``` 完成以上配置...

    nginx 部署 vue 项目找不到js css文件的解决方法

    在使用nginx部署Vue项目时,有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法,主要包括vue-cli@3的配置方式和vue-...

    在nginx上部署vue项目(history模式)的方法

    总结来说,部署Vue项目并启用`history`模式需要在服务器端进行适当的配置,以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx,都需要将未找到的请求重定向至`index.html`,以便Vue应用的...

    针对Vue路由history模式下Nginx后台配置操作

    前端将vue路由模式改为history模式后需要运维配置才能正常...补充知识:Vue History 模式下 整合Nginx部署踩坑过程 在公司部署Vue项目期间,因Vue的Router下的Hash模式的#号太过于难看,就去把模式改为了history模式

    vue项目部署到nginx/tomcat服务器的实现

    总结来说,Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录,并确保web.xml中的错误处理设置能正确处理...

    Vue下路由History模式打包后页面空白的解决方法

    Vue下路由History模式打包后页面空白的解决方法 在 Vue 项目中,默认的路由模式是 Hash 模式,但是这种模式会带来一些问题,如 URL 中的 "#" 符号不美观,微信分享、授权登录等功能也会出现一些问题。 History 模式...

    vue-cli history模式实现tomcat部署报404的解决方式

    然而,当使用`history`模式并将应用部署到Apache、Nginx或Tomcat等服务器时,可能会遇到404错误,因为服务器默认并不处理这种路由请求。 在Tomcat中部署Vue CLI构建的项目并采用`history`模式时,遇到404错误的主要...

    IIS部署.NET+Vue项目.docx

    iis 部署 .net + vue 项目知识点总结 在本文中,我们将对 iis 部署 .net + vue 项目的知识点进行总结,涵盖从项目的基本环境到 api 的配置、https 的设置、Swagger 的使用等多个方面。 一、基本环境 首先,我们...

    vue-router启用history模式下的开发及非根目录部署方法

    本文将详细介绍如何在启用history模式下进行开发,并在非根目录下部署Vue应用。 ### 前端路由的必要性 在传统的多页面应用(MPA)中,每个页面的切换都会重新加载整个页面,这涉及到与服务器的一次完整通信。而SPA...

    vue history 模式打包部署在域名的二级目录的配置指南

    本文将详细介绍如何在Vue CLI3环境下,配置和部署使用history模式的Vue项目到域名的二级目录下。 首先,需要了解的是Vue Router的配置。在创建Vue项目时,可以通过Vue CLI来生成一个带有路由配置的项目模板。在路由...

    Vue项目History模式404问题解决方法

    然而,当项目使用History模式部署到服务器,尤其是Nginx服务器上时,遇到刷新页面出现404错误的问题,因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析: 在...

    详解vue通过NGINX部署在子目录或者二级目录实践

    1、修改 router/index.js 添加一行 base: 'admin', 2、然后修改 config/index.js 增加一行 const assetsPublicPath = '/admin/' 然后修改 下面两处... # vue h5 history mode 时配置 try_files $uri $uri/ /ind

    vue-router+nginx 非根路径配置方法

    在使用 vue-router 的 History 模式时,我们需要在 nginx 中添加相应的配置,以便正确地处理路由请求。在根路径下配置的示例代码如下: location / { try_files $uri $uri/ /index.html; } 该配置将所有路由请求...

    vue下使用nginx刷新页面404的问题解决

    以上步骤可以有效解决使用Vue.js和nginx部署的单页面应用(SPA)在刷新页面时出现404错误的问题。这种配置使得nginx可以正确地处理所有前端路由的请求,避免了用户刷新页面时服务器尝试访问不存在的文件路径,从而...

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

    总结来说,为了解决Vue项目在history模式下除了index.html之外的其他路由404报错问题,需要在服务器上(如nginx)配置路由重定向规则,将所有的请求都重定向到入口文件index.html。此外,还需要考虑CORS相关的配置,...

    nginx部署vue项目

    如果Vue项目使用了基于`history`模式的路由,还需要处理URL重定向。在`server`块内添加以下配置: ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这段代码会将所有未匹配的请求重定向到`...

Global site tag (gtag.js) - Google Analytics