問題

廢話不多說(shuō)，目的是將項(xiàng)目部署到xxx.com/app路徑下。

腳手架用的是vite，一開始什么都沒有配置，base(如果是vue.config.js則是對(duì)應(yīng)publicPath)是默認(rèn)的（根目錄），路由模式使用的是histroy，規(guī)則大致如下：

const routes = [
  { path: '/', component: () => import('@/views/Home.vue')},
  { path: '/About', component: () => import('@/views/About.vue')},
]

當(dāng)時(shí)我的理解是，部署的時(shí)候?qū)⒋虬蟮奈募旁?code>/app/目錄下，那么訪問xxx.com/app就能匹配到對(duì)應(yīng)的路由。

當(dāng)項(xiàng)目部署后，首先是出現(xiàn)兩個(gè)文件404問題，分別是@vite/client.js和main.js。

當(dāng)時(shí)在網(wǎng)上看到的解決方法是把base修改成’./'，也就是相對(duì)路徑，修改完一部署，果然沒報(bào)404了，但是頁(yè)面一片空白，并且控制臺(tái)也沒有任何報(bào)錯(cuò)（這時(shí)候并不知道nginx的配置和資源在服務(wù)器存放的路徑）。

這就奇怪了，明明已經(jīng)加載了main.js部分的內(nèi)容，但卻沒有渲染出組件。然后就在同事的nginx上部署了一下，發(fā)現(xiàn)是可以正常訪問的，但他的情況是沒有加上子路徑的，一加上/app就不行了。其實(shí)這里就大致知道是nginx配置與前端打包配置沒有配合好的原因了。

解決方法

后面了解了nginx的配置，試了許多方案，終于配置好了：

nginx conf
server {
    # xxx其他配置

    listen       80;
    server_name  xxx.com;

    location /app {
      alias xxx/nginx-1.20.2/html/app/;
      try_files $uri $uri/ /app/index.html;
    }

    # xxx其他配置
}

vite.config.js
base: '/app'

routes
const routes = [
  { path: '/app/', component: () => import('@/views/Home.vue')},
  { path: '/app/About', component: () => import('@/views/About.vue')},
]

兩個(gè)頁(yè)面都能正常訪問，經(jīng)過測(cè)試發(fā)現(xiàn)，base需要和location保持一致（后面發(fā)現(xiàn)不一定，base可以有多種寫法），而文件存放的路徑不是關(guān)鍵，即使修改也可以正常訪問到（文件需要放到對(duì)應(yīng)的目錄下）：

nginx
server {
    listen       80;
    server_name  xxx.com;
    location /app {
      # 將前端打包文件放到dist目錄下
      alias xxx/nginx-1.20.2/html/dist/;
      try_files $uri $uri/ /dist/index.html;
    }
}

那么我最開始設(shè)置成的base為’./'時(shí)，沒有渲染組件是什么情況呢？

nginx
server {
    listen       80;
    server_name  xxx.com;

    location /app {
      alias xxx/nginx-1.20.2/html/app/;
      try_files $uri $uri/ /app/index.html;
    }
}

vite.config.js
base: './'

routes
const routes = [
  { path: '/', component: () => import('@/views/Home.vue')},
  { path: '/About', component: () => import('@/views/About.vue')},
]

現(xiàn)在看來(lái)，確實(shí)是因?yàn)槁酚梢?guī)則不對(duì)導(dǎo)致的，如果路由規(guī)則修改為如下：

const routes = [
  { path: '/app', component: () => import('@/views/Home.vue')},
  { path: '/app/About', component: () => import('@/views/About.vue')},
]

則可以正常訪問，說(shuō)明base不一定要與location一致，而是要保證路由前綴和location要匹配的上。

此外，看到有人說(shuō)需要配置router中的base，會(huì)自動(dòng)為路由加上前綴，如下：

const routes = [
  { path: '/', component: () => import('@/views/Home.vue')},
  { path: '/About', component: () => import('@/views/About.vue')},
]

const router = createRouter({
  history: createWebHistory(),
  base: '/app',
  routes,
})

但我試了卻沒有生效，加與不加，訪問xxx.com/app都是空白頁(yè)面，且不報(bào)錯(cuò)，說(shuō)明就是沒有匹配到對(duì)應(yīng)的路由，可能還是我的寫法有問題？

其中如果你某些地方?jīng)]配置好還會(huì)出現(xiàn)訪問xxx.com/app正常，xxx.com/app/About出現(xiàn)404的問題，可以檢查下前端和nginx有沒有對(duì)應(yīng)配好。

總結(jié)

如果使用history模式，并且需要部署到子級(jí)目錄下，需要配置好以下內(nèi)容：

• vite.config.js的base(vue.config.js對(duì)應(yīng)publicPath)可以有三種設(shè)置方式：相對(duì)路徑'./'、服務(wù)器存放資源的路徑、nginx配置文件location的路徑，設(shè)置有誤可能出現(xiàn)404。

• nginx配置如下：

  server {
      listen       80;
      server_name  xxx.com;
  
      location /app {
        alias xxx/nginx-1.20.2/html/app/;
        try_files $uri $uri/ /app/index.html;
      }
  }
  

  alias就是匹配到location后去對(duì)應(yīng)路徑下找資源，try_files則是在url前綴包含location但卻沒有匹配的資源時(shí)會(huì)去使用的資源。

  例如這里location沒有配置/app/About，但是卻可以訪問到就是因?yàn)檫@條配置，如果刪掉則會(huì)出現(xiàn)404，這是因?yàn)閱雾?yè)面應(yīng)用只有一個(gè)入口文件，所以可以這么做。

• route規(guī)則中的路徑前綴需要與location一致。

這三點(diǎn)如果都沒錯(cuò)的話應(yīng)該就能正確部署了，推薦base、路由前綴、location三者統(tǒng)一，方便配置，也可以減少出錯(cuò)。另外，前端打包后的文件也推薦放到對(duì)應(yīng)級(jí)別的目錄中，如在本例子中，存放的位置為/xxx/nginx/html/app/。

其他

當(dāng)你base設(shè)置為資源的絕對(duì)路徑時(shí)（如/dist），如果你跑本地服務(wù)的話，可能會(huì)訪問不到資源，但是打包后部署上去是可以正常訪問的。

看到網(wǎng)上有人說(shuō)使用base使用’./'會(huì)出現(xiàn)刷新404的情況，但我這邊沒有遇到，如果大家遇到可以說(shuō)明一下情況，共同探討。

對(duì)于單頁(yè)面應(yīng)用，location路徑的最后可以不帶/。這樣的好處是，假如你想要部署的地址是xxx.com/app，那么你使用xxx.com/app或者xxx.com/app/都可以訪問到，這是因?yàn)榕渲昧藅ry_files，即使找不到，但是由于前綴匹配到了location，可以去尋找默認(rèn)的文件；

如果location最后攜帶了/，則xxx.com/app訪問不到。這是因?yàn)閘ocation最后加了/需要精確匹配到xxx.com/app/前綴才能訪問。
當(dāng)然這也要根據(jù)項(xiàng)目需求來(lái)決定如何配置。

最后，這是本人初次接觸nginx部署，如果有說(shuō)的不對(duì)的地方歡迎指出，共同進(jìn)步。

到此這篇關(guān)于前端部署踩坑實(shí)戰(zhàn)記錄的文章就介紹到這了,更多相關(guān)前端部署后404、頁(yè)面空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論