vue部署到域名二级目录刷新404的解决

目录
  • vue部署到域名二级目录刷新404
  • vue如何部署二级目录
    • 说一下这里会遇到得问题
    • 如何解决

vue部署到域名二级目录刷新404

一个域名有个根目录，但有两个项目，就需要二级目录

比如说，我有一个域名为csdn.com的服务器，我想部署两个项目：

  • 12306项目：http://csdn.com/12306
  • 淘宝项目：http://csdn.com/taobao

如果是单页项目，而且单页项目的路由用的是history模式，不管是vue还是react都会“刷新当前页面404”

这是因为这种（history）模式会被错误的认为向服务端发出了真请求，但是其实这这是前端路由变化，后端自然也没做好相应你的处理，所以就404了

前端配置：

vue.config.js增加如下配置：

publicPath: '/caspage/'

路由配置：

const router = new VueRouter({
  mode: 'history',
  base:'/caspage/',
  routes
})

nginx配置：

 # 这里是需要部署的二级目录应用配置
 location /cloudChartPage {
    alias /data/cloudChartPage/;
    index  index.html index.htm;
    try_files $uri $uri/ /cloudChartPage/index.html;
 }

然后重新启动就行了

vue如何部署二级目录

有的时候，我们的域名很珍贵，除了二级域名外。

我们不仅可以把项目部署到当前域名下 也可以部署到二级目录下，这样的话，就可以部署多个项目了。

比如说，我有一个域名为sslcsq.com的服务器，我想部署两个项目：

  • 京东项目：http://sslcsq.com/jingdong
  • 淘宝项目：http://sslcsq.com/taobao

说一下这里会遇到得问题

普通项目不会有问题，

但是如果是单页项目(比如vue写的单页面)，而且单页项目的路由用的是history模式，不管是vue还是react都会出现一个问题

那就是“刷新当前页面404”

这是因为这种（history）模式会被错误的认为向服务端发出了真请求，但是其实这这是前端路由变化，后端自然也没做好相应你的处理，所以就404了

如何解决

前端配置（前端看这就行了，后面找后台配置）

在vue.config.js中增加如下配置：

publicPath: '/taobao/'                   这里就是配置的二级目录

路由配置如下：

const router = new VueRouter({
  mode: 'history',
  base:'/taobao/',                          这里就是配置的二级目录
  routes
})

后端nginx.conf配置如下：（注意前后端沟通~）

# 首先给要部署的项目分配一个服务
　　server {
    listen 8001;
    location / {
        # vue h5 history mode 时配置
        try_files $uri $uri/ /index.html;
        root html/caspage;
        index index.html index.htm;
    }
}
　　# 再到配置域名的主配置server上做反向代理　
server {
    listen       80;
    server_name  localhost; 
    location / {
        root   html;
        index  index.html index.htm;
        # vue-router的history模式下，刷新页面404处理
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
   
     
     # 这里是需要部署的二级目录应用配置
     location /cloudChartPage {
        alias /data/cloudChartPage/;
        index  index.html index.htm;
        try_files $uri $uri/ /cloudChartPage/index.html;
     }
}

新启动然后访问就可以http://sslcsq.com/taobao 或者 http://sslcsq.com/京东 看你的二级目录配置的什么了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue打包上传服务器刷新404问题的两种方案

    vue打包上传服务器刷新404问题的两种方案

    一:nginx服务器解决方案,修改   .conf  配置文件 有两种解决方案 1: location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2: location / { error_page 404 /index.html; #try_file $uri $uri/ /index.html =404; } 二:apach

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • vue框架下部署上线后刷新报404问题的解决方案(推荐)

    <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> nginx配置 location / { try_files $uri $uri/

  • vue部署到域名二级目录刷新404的解决

    目录 vue部署到域名二级目录刷新404 vue如何部署二级目录 说一下这里会遇到得问题 如何解决 vue部署到域名二级目录刷新404 一个域名有个根目录,但有两个项目,就需要二级目录 比如说,我有一个域名为csdn.com的服务器,我想部署两个项目: 12306项目:http://csdn.com/12306 淘宝项目:http://csdn.com/taobao 如果是单页项目,而且单页项目的路由用的是history模式,不管是vue还是react都会“刷新当前页面404” 这是因为这种(h

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

    最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署. 本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置: 1. vue-r

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

    1.修改 router/index.js 添加一行 base: 'admin', 2.然后修改 config/index.js 增加一行 const assetsPublicPath = '/admin/' 然后修改 下面两处assetsPublicPath 的值为定义的变量 3.部署时,通过NGINX的反向代理 首先,给需要部署的项目定义一个 NGINX 的 server server { listen 8001; location / { # vue h5 history mode 时配置

  • apache下面二级目录部署react/vue的方法

    本文主要是记录一下在apache二级目录上面部署react和vue项目.根目录下面部署很简单,但是在二级目录下就需要在webpack的配置或者vue-cli的配置文件以及路由组件做一些简单调整.由于mac系统自己带了apache,所以我们只需要开启就可以了. 配置apache 在终端中输入sudo apachectl start,然后在浏览器中输入"http://localhost",如果出现"It works!"则说明apache启动成功. 由于mac系统在当前用

  • 关于vue项目部署后刷新网页报404错误解决

    关于vue项目部署后刷新网页报404错误解决

    目录 报404错误说明是路由的问题 router有两种模式 成功解决 我的项目,前端是vue项目在部署之后可以正常访问,流程没有问题,可是刷新之后浏览器会返回404错误. 部署使用的是nginx,经常用来部署项目,所以容器肯定没有问题, 这种问题在我直接启动时并没有出现过,所以可以猜测是打包时出现的问题, 报404错误说明是路由的问题 vue管理路由的是"router" 目标明确了,去找router的配置文件 import Vue from 'vue' import Router fr

  • 五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法

  • nginx配置域名后的二级目录访问不同项目的配置操作

    场景描述: 通过二级目录(虚拟目录,应用程序)的方式访问同一ip+端口的不同应用,例如location是用户使用页面,location/admin/是管理页面,location部署在192.168.1.100的80端口,location/admin部署在172.20.1.32的8080端口上. 解决方案: 使用nginx反向代理,配置如下: server { listen 80; server_name demo.domain.com; #通过访问service二级目录来访问后台 locatio

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • vue history模式刷新404原因及解决方法

    目录 项目场景: 问题描述 原因分析: 第一步 第二步 总结 项目场景: 提示:这里简述项目相关背景: vue项目路由history模式 问题描述 提示:这里描述项目中遇到的问题: vue history模式刷新404原因 原因分析: 因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404 解决方案

随机推荐