多页面程序在 Nginx 上部署，解决 Vue 路由404问题wn编辑器

最新推荐文章于 2023-11-29 17:09:33 发布
最新推荐文章于 2023-11-29 17:09:33 发布
阅读量193 收藏
点赞数
原文链接：https://blog.csdn.net/qq_42496307/article/details/95739643
版权

Vue 多页面程序在 Nginx 上部署，解决 Vue 路由404问题这里写自定义目录标题

终于用Vue把项目的前端部分都做好了，平时用直接在本机跑的时候任何路由都是好好的。
但是把项目打包好部署的时候却发现…
原来事情并没有那么简单…

这是我打包后的目录结构
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在Nginx上部署还要配置一下Nginx才行
首先，进入Nginx的配置
vi /usr/local/nginx/conf/nginx.conf

然后在里面加上下面两个 try_files 就好啦
在这里插入图片描述
其实我也不知道上面 location 后面的部分写的到底准不准确，毕竟我只是一个小前端
咱也不知道，咱也不敢问
总之路由的问题大概就是这样写几个 try_files 来解决的

方法参考于：
https://github.com/yaoyao1987/vue-cli-multipage/issues/22
https://blog.csdn.net/Tomwildboar/article/details/89478944

舒克·堂吉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 多页面程序在 Nginx 上部署，解决 Vue 路由404问题
qq_42496307的博客
07-13 1625
终于用Vue把项目的前端部分都做好了，平时用直接在本机跑的时候任何路由都是好好的。 但是把项目打包好部署的时候却发现… 原来事情并没有那么简单… 这是我打包后的目录结构 在Nginx上部署还要配置一下Nginx才行 首先，进入Nginx的配置 vi /usr/local/nginx/conf/nginx.conf 然后在里面加上下面两个 try_files 就好啦 其实我也不知道上面 loca...
nginx同一个server下配置多套前端页面
mouwengang的博客
09-09 1512
因同一个server下location root只能配置一个，此时需要使用虚拟目录alias。 location /mobile/ { alias /home/mobile/ try_files $uri $uri/ /mobile/index.html; } 这样配置当访问的/mobile/下资源不存在时会跳转到/mobile/index.html。 try_file简单介绍： 一.try_files的语法规则： 格式1：try_files file … uri; 格式2：try_files fi
Nginx部署多个前后端分类项目（根据请求路径配置访问不同的前端页面）
最新发布
Sophia的博客
11-29 3269
当一个项目分为前端页面和后端管理页面时，需要根据请求路径区分访问不同的页面时，则需要配置Nginx进行转发 也相当于，Nginx配置同一个域名端口，根据不同的请求路径来实现访问不同的页面的功能
Nginx 部署 Vue 项目到 二级目录
一直被模仿，从未被超越
11-30 4031
1、vue.config.js module.exports = { publicPath: '/rm/', 2、路由下index.js const router = new VueRouter({ base: '/rm/', }) 3、Dockerfile # 導入nginx镜像 # FROM nginx:1.13.7 # FROM nginx:1.15.1 FROM nginx:1.15.1-alpine USER root MAINTAINER Howard <howar.
nginx上配置二级目录访问vue项目
weixin_43790802的博客
08-04 1705
nginx上配置二级目录访问vue项目
nginx部署多个静态页面
shenzy
11-29 3878
首先把你的html页面（或者其它格式）上传到服务器，随便建个目录 我这里目录是 /usr/development/static/pages 再找到你的nginx.conf文件，按照下图配置 注意前两个location的区别，一个是root一个是aliasok我话讲完 散会本文转自 https://blog.csdn.net/qq_33709582/article/details/114153472，如有侵权，请联系删除。
Nginx单服务器部署多个网站，域名
Admans的专栏
08-26 2952
原文：https://blog.csdn.net/yaologos/article/details/113356620。例如，springboot的项目部署在8080端口，则80端口的http请求被Nginx转发给Springboot。利用nginx，获取80端口的信息，识别用户访问的是哪个网站，Nginx配置如下。网站的分别配置，并且指定了不带www的域名跳转到www域名下的网站。版权声明：本文为作者原创文章，转载请附上博文链接！服务器，集中处理请求，转发到其他服务器上。文件，在最下面添加下面配置中的。.
在nginx上部署vue项目(history模式)的方法
08-28
在开发Vue应用时，通常会使用vue-router作为前端路由管理器。默认情况下，vue-router采用的是`hash`模式，这会在URL中添加一个`#`符号，如`http://localhost:8080/bank/page/count/#/`。然而，为了获得更美观的URL，...
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨...通过以上步骤，你应该能够成功地在同一个Nginx服务器上部署并运行多个Vue.js项目。记住，每个项目都需要根据其特定的路径进行相应的配置，以便Nginx能够正确地转发请求到相应的静态文件。
vue下使用nginx刷新页面404的问题解决
10-16
主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue-multi-page:vue下的多页面应用
05-18
vue2.* (多页面跳转) @[vue2.3.3|webpack2.6.1|scss|axios] 以前看过有相关朋友share了空的多页面脚手架. 不过down了几个都是webpack1.0或者vue1.0的. 刚好项目需要用到vue. 就在vue-cli的基础上进行了修改 已经有babel直接用es6即可,如果需要修改配置的请到 .babelrc里面修改 并且全局引了JQ(如果不需要或者不喜欢 请到base.conf.js里面修改) 命令 国际惯例 npm install (or cnpm 其他) 装依赖包 npm run dev 起服务 npm run build 打上线包 跑起来服务后,需要在url输入 /module/*.html (*为对应文件夹名字) 添加了新文件夹后,需要重新 npm run dev一下 ##目录结构 build/config: 一系列配置文件 src:
vue-multi-page:vue多页面---模板
05-08
vue-multi-page vue多页面实践之路 项目初衷 vue作为单页面应用已经无可挑剔，但在实际应用的时候，我发现真实的需求往往是需要对每张页面都部署一套vue体系(微博监控后台/微信监控后台/配置发布后台/etc)， 这时候部署多套vue进行编译显然并不现实，但是网上又没有现成可用的多页面vue项目可供利用，所以就有了这个项目。 项目基于vue-cli构建，魔改的过程中踩到了各种各样的坑，都在项目文档和代码注释中进行了详细的说明，如果还有不甚清楚的地方，欢迎开issue提问 预祝vue愉快 直接使用 支持命令: 1. `npm run dev` / `npm run start` => 启动本地开发服务器 2. `npm run build` => 本地打包 3. `npm run publish` => 线上打包(相关cdn配置在\config\cdn.js里) 4.
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
nginx部署多个vue多页面项目
link750的博客
05-26 1656
众所周知，vue主要是用于开发单页应用的，在网上，也可以通过修改配置文件，实现多页面应用的开发，通过配置方式的开发多页面会有较多的缺点，在网上有许多论述，在此不再多言。此篇文章主要讲的是vue多页面的项目在nginx上部署，实现前后端分离，后台通过webapi和ajax的方式获取数据的方式。 1、 首先需要做的是在服务器上安装nginx服务器，个人使用的是Ubuntu20.4版本，这个网上的教程较多，不做过多介绍。 2、修改nginx的配置文件，在安装完成之后，输入nginx -v查看nginx服务的版本，
详解vue通过NGINX部署在子目录或者二级目录实践
weixin_44400506的博客
03-05 3294
这篇文章主要介绍了详解vue通过NGINX部署在子目录或者二级目录实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1、修改 router/index.js 添加一行 base: ‘admin’, 2、然后修改 config/index.js 增加一行 const assetsPublicPath = ‘/admin/’ 然后修改 下面两处assetsPublic...
Nginx下同域部署多个Vue项目（history路由模式），报404、500错误
hwijew的博客
04-11 6003
一、环境 系统: windows nginx: 1.20.2 nodejs: v10.24.0 npm: v6.14.11 @vue/cli: 4.5.13 二、问题描述 新建Vue项目的时候，如果选择hash模式的话，地址上都会带一个#号，本人嫌太丑，选择了history模式，到了部署项目的时候，刚好又需要多个项目部署在一起。部署完发现：① js、css文件找不到、② 页面报404、③ 页面报500。 三、解决方案 1、修改vue项目中的vue.config.js文件 a项目增加以下内容： module.
配置nginx访问多个页面
d81895606的博客
05-31 7001
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections ...
nginx 部署 vue3 history路由404
06-07
如果使用 Vue3 的 history 模式进行路由，需要在 nginx 中进行配置，否则会出现 404 错误。 首先，需要在 nginx 的配置文件中添加以下代码： ``` location / { try_files $uri $uri/ /index.html; } ``` 这段代码的作用是，当访问的地址不存在时，将请求重定向到 index.html 文件，然后由 Vue 路由来处理该请求。 另外，如果你的 Vue3 项目是在子目录下部署的，比如 `/myapp`，那么需要在配置文件中添加以下代码： ``` location /myapp/ { try_files $uri $uri/ /myapp/index.html; } ``` 这样，就可以在 nginx 中正确部署 Vue3 的 history 路由了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值