欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問題

 更新時(shí)間：2022年12月05日 08:49:56   作者：我先潤了  
nginx 是一個(gè)代理的服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于如何通過五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問題的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

期末月前本來部署過一次，昨天部署的時(shí)候發(fā)現(xiàn)又給忘了，而且出了很多問題，在這統(tǒng)一匯總一下。

步驟一：改端口

在vue.config.js下的devServer把host改成服務(wù)器的地址

步驟二： 打包

用npm run build打包，最后是這樣的，并且目錄下多了個(gè)dist文件夾

步驟三：將dist文件夾上傳到服務(wù)器上

我用的xshell，沒辦法上傳文件夾，所以我是壓縮成rar用rz上傳再在服務(wù)器上解壓的，至于linux怎么解壓rar，看這如何在Linux系統(tǒng)中解壓rar文件

肯定有更好的方法，但是我還沒找到。解壓后長這樣

步驟四:修改nginx.conf(重中之重)

這一步很關(guān)鍵，設(shè)置不好可能出現(xiàn)頁面403或404報(bào)錯(cuò)。

首先，用nginx -t找到nginx.conf的具體路徑

!2a3be3bf.png)

接下來開始編輯這個(gè)文件，下圖這個(gè)地方要改成當(dāng)前操作用戶的用戶名，不然可能部署之后打開頁面報(bào)錯(cuò)403。

接下來，將1部分改成解壓后的dist存放位置

2和3是解決路由刷新報(bào)錯(cuò)404的問題

 try_files $uri $uri/ @router;
 location @router {
    rewrite ^.*$ /index.html last;
 }

步驟五：重啟nginx

systemctl restart nginx

然后就能正常打開頁面啦

總結(jié)

到此這篇關(guān)于五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問題的文章就介紹到這了,更多相關(guān)Nginx部署Vue及動(dòng)態(tài)路由刷新404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式

    Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式

    這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-08-08
  • vite中如何使用@?配置路徑別名

    vite中如何使用@?配置路徑別名

    這篇文章主要介紹了vite中如何使用@?配置路徑別名，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • vue3中各種類型文件進(jìn)行預(yù)覽功能實(shí)例

    vue3中各種類型文件進(jìn)行預(yù)覽功能實(shí)例

    在vue移動(dòng)端項(xiàng)目中經(jīng)常遇到這樣的需求,對(duì)一些上傳的附件可以點(diǎn)擊之后在線預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類型文件進(jìn)行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • Vue+Node實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳

    Vue+Node實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳

    文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文將利用Vue+Node實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳，感興趣的可以了解一下
    2022-04-04
  • 使用Vue3和Plotly.js打造一個(gè)3D圖在線展示的實(shí)現(xiàn)步驟

    使用Vue3和Plotly.js打造一個(gè)3D圖在線展示的實(shí)現(xiàn)步驟

    三維網(wǎng)格圖廣泛應(yīng)用于科學(xué)可視化、醫(yī)學(xué)成像、工程設(shè)計(jì)等領(lǐng)域,用于展示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個(gè)3D圖在線展示的實(shí)現(xiàn)步驟,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
    2024-07-07
  • Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)及 Springsecurity 按鈕級(jí)別的權(quán)限控制

    Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)及 Springsecurity 按鈕級(jí)別的權(quán)限控制

    這篇文章主要介紹了Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)以及 Springsecurity 按鈕級(jí)別的權(quán)限控制的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • 詳解Vue CLI3配置解析之css.extract

    詳解Vue CLI3配置解析之css.extract

    這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解Vue實(shí)現(xiàn)鏈接生成二維碼并支持下載

    詳解Vue實(shí)現(xiàn)鏈接生成二維碼并支持下載

    在現(xiàn)代 Web 應(yīng)用中,快速分享鏈接是一項(xiàng)常見需求,二維碼作為一種簡潔的分享方式,受到了廣泛歡迎,所以本文將介紹如何使用 Vue 純前端技術(shù)實(shí)現(xiàn)動(dòng)態(tài)生成鏈接二維碼的方法,需要的可以參考下
    2024-03-03
  • vue3?ref獲取組件實(shí)例詳細(xì)圖文教程

    vue3?ref獲取組件實(shí)例詳細(xì)圖文教程

    在Vue3中可以使用ref函數(shù)來創(chuàng)建一個(gè)響應(yīng)式的變量,通過將ref函數(shù)應(yīng)用于一個(gè)組件實(shí)例,我們可以獲取到該組件的實(shí)例對(duì)象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實(shí)例的詳細(xì)圖文教程,需要的朋友可以參考下
    2023-10-10
  • Vue?事件中的?.native你搞明白了嗎

    Vue?事件中的?.native你搞明白了嗎

    .native主要是給自定義的組件添加原生事件，可以理解為該修飾符的作用就是把一個(gè)vue組件轉(zhuǎn)化為一個(gè)普通的HTML標(biāo)簽，并且該修飾符對(duì)普通HTML標(biāo)簽是沒有任何作用的，這篇文章主要介紹了vue?事件中的?.native你搞清楚了嗎,需要的朋友可以參考下
    2023-02-02

最新評(píng)論