vue部署到域名二級(jí)目錄刷新404的解決

更新時(shí)間：2022年09月06日 09:11:23 作者：DefineJ

這篇文章主要介紹了vue部署到域名二級(jí)目錄刷新404的解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue部署到域名二級(jí)目錄刷新404

一個(gè)域名有個(gè)根目錄，但有兩個(gè)項(xiàng)目，就需要二級(jí)目錄

比如說，我有一個(gè)域名為csdn.com的服務(wù)器，我想部署兩個(gè)項(xiàng)目：

12306項(xiàng)目：http://csdn.com/12306
淘寶項(xiàng)目：http://csdn.com/taobao

如果是單頁項(xiàng)目，而且單頁項(xiàng)目的路由用的是history模式，不管是vue還是react都會(huì)“刷新當(dāng)前頁面404”

這是因?yàn)檫@種（history）模式會(huì)被錯(cuò)誤的認(rèn)為向服務(wù)端發(fā)出了真請求，但是其實(shí)這這是前端路由變化，后端自然也沒做好相應(yīng)你的處理，所以就404了

前端配置：

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

publicPath: '/caspage/'

路由配置：

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

nginx配置：

 # 這里是需要部署的二級(jí)目錄應(yīng)用配置
 location /cloudChartPage {
    alias /data/cloudChartPage/;
    index  index.html index.htm;
    try_files $uri $uri/ /cloudChartPage/index.html;
 }

然后重新啟動(dòng)就行了

??

vue如何部署二級(jí)目錄

有的時(shí)候，我們的域名很珍貴，除了二級(jí)域名外。

我們不僅可以把項(xiàng)目部署到當(dāng)前域名下也可以部署到二級(jí)目錄下，這樣的話，就可以部署多個(gè)項(xiàng)目了。

比如說，我有一個(gè)域名為sslcsq.com的服務(wù)器，我想部署兩個(gè)項(xiàng)目：

京東項(xiàng)目：http://sslcsq.com/jingdong
淘寶項(xiàng)目：http://sslcsq.com/taobao

說一下這里會(huì)遇到得問題

普通項(xiàng)目不會(huì)有問題，

但是如果是單頁項(xiàng)目(比如vue寫的單頁面)，而且單頁項(xiàng)目的路由用的是history模式，不管是vue還是react都會(huì)出現(xiàn)一個(gè)問題

那就是“刷新當(dāng)前頁面404”

這是因?yàn)檫@種（history）模式會(huì)被錯(cuò)誤的認(rèn)為向服務(wù)端發(fā)出了真請求，但是其實(shí)這這是前端路由變化，后端自然也沒做好相應(yīng)你的處理，所以就404了

如何解決

前端配置（前端看這就行了，后面找后臺(tái)配置）

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

publicPath: '/taobao/' ? ? ? ? ? ? ? ? ? 這里就是配置的二級(jí)目錄

路由配置如下：

const router = new VueRouter({
? mode: 'history',
? base:'/taobao/', ? ? ? ? ? ? ? ? ? ? ? ? ?這里就是配置的二級(jí)目錄
? routes
})

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

# 首先給要部署的項(xiàng)目分配一個(gè)服務(wù)
　　server {
? ? listen 8001;
? ? location / {
? ? ? ? # vue h5 history mode 時(shí)配置
? ? ? ? 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;
? ? }
? ?
? ? ?
? ? ?# 這里是需要部署的二級(jí)目錄應(yīng)用配置
? ? ?location /cloudChartPage {
? ? ? ? alias /data/cloudChartPage/;
? ? ? ? index ?index.html index.htm;
? ? ? ? try_files $uri $uri/ /cloudChartPage/index.html;
? ? ?}
}

新啟動(dòng)然后訪問就可以http://sslcsq.com/taobao 或者 http://sslcsq.com/京東看你的二級(jí)目錄配置的什么了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: