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

利用nginx部署vue項(xiàng)目的全過程

 更新時(shí)間:2022年03月23日 15:32:38   作者:ChangYan.  
今天要用到服務(wù)器nginx,還需要把自己的vue的項(xiàng)目部署到服務(wù)器上去所以就寫一下記錄下來,下面這篇文章主要給大家介紹了關(guān)于利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下

首先需要在服務(wù)器里下載nginx,

apt-get install nginx

檢查nginx是否安裝,輸入如下命令后若出現(xiàn)版本號(hào)則安裝成功

nginx -v

然后啟動(dòng)nginx

server nginx restart

如果有如下報(bào)錯(cuò),則按照它的提示下載相關(guān)插件

我這里下載了2次不同的插件。直到運(yùn)行server nginx restart指令成功

此時(shí)打開瀏覽器,輸入你的服務(wù)器ip,就可以看到nginx啟動(dòng)成功

之后進(jìn)行Vue項(xiàng)目打包:

在你一般輸入運(yùn)行npm run dev的地方輸入npm run build就可以完成打包。

如果打包失敗有提示build不存在之類的語句,如圖:

那就試試npm run build:prod,完成打包!

之后會(huì)在項(xiàng)目根目錄下自動(dòng)生成一個(gè)默認(rèn)dist文件夾

然后如果你是在本地打包的話,需要將此文件夾上傳至你的服務(wù)器上。后邊需要用到。

這里強(qiáng)烈建議將dist文件放在服務(wù)器里專門放項(xiàng)目的文件夾,后邊設(shè)置路徑的時(shí)候方便查找,比如我是放在了/home/ubuntu/myapp/ruoyi/ruoyi-ui的文件夾下

接下來配置 Nginx

一定要停止nginx的運(yùn)行,否則配置可能不生效!(關(guān)于如何停止nginx,網(wǎng)上教程很多,就找到進(jìn)程殺死進(jìn)程就可以,或者用一句指令停止)

我們需要修改nginx.conf

找到有nginx.conf文件的目錄,我們可以用sudo whereis nginx.conf找到該路徑然后進(jìn)入該目錄

修改nginx.conf,輸入如下命令:sudo vim nginx.conf,然后你如果是首次配置的話,可以直接復(fù)制我下邊的代碼,記得要修改root里dist的路徑。
如果是之前配置過其它項(xiàng)目的話,只用把我http里邊包含的 server 復(fù)制到你的文件對(duì)應(yīng)位置就行!

user root;
worker_processes  1

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/ubuntu/myapp/ruoyi/ruoyi-ui/dist; # 路徑改成自己的dist路徑
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://localhost:8080/; #設(shè)置監(jiān)控后端啟動(dòng)的端口
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                root html;
        }

}

然后保存并退出。

重啟nginx

nginx -s reload

然后訪問ip號(hào)就可以運(yùn)行出頁面了!!

大功告成!

總結(jié)

到此這篇關(guān)于利用nginx部署vue項(xiàng)目的文章就介紹到這了,更多相關(guān)nginx部署vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造

    vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造

    這篇文章主要介紹了vue3.0 CLI - 2.2 - 組件 home.vue 的初步改造,home.vue 組件有了兩個(gè)屬性:navs 和 tts 屬性,具體實(shí)例代碼大家跟隨小編一起通過本文學(xué)習(xí)吧
    2018-09-09
  • vue3?證件識(shí)別上傳組件封裝功能

    vue3?證件識(shí)別上傳組件封裝功能

    證件圖片識(shí)別上傳根據(jù)業(yè)務(wù)需要,經(jīng)常涉及到證件上傳,例如身份證上傳、銀行卡、營(yíng)業(yè)執(zhí)照等信息,根據(jù)設(shè)計(jì)師的設(shè)計(jì),單獨(dú)封裝了一個(gè)上傳組件,這篇文章主要介紹了vue3?證件識(shí)別上傳組件封裝,需要的朋友可以參考下
    2023-05-05
  • Vue開發(fā)實(shí)踐指南之應(yīng)用入口

    Vue開發(fā)實(shí)踐指南之應(yīng)用入口

    這篇文章主要給大家介紹了關(guān)于Vue開發(fā)實(shí)踐指南之應(yīng)用入口的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-01-01
  • 解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問題

    解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問題

    今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue3中Hooks封裝的技巧詳解

    Vue3中Hooks封裝的技巧詳解

    這篇文章主要來和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠?yàn)榇蠹以?nbsp;Vue 3 項(xiàng)目中更好地利用 Hooks 提供一些思路和實(shí)踐經(jīng)驗(yàn)
    2023-12-12
  • vue webpack實(shí)用技巧總結(jié)

    vue webpack實(shí)用技巧總結(jié)

    本篇文章給大家總結(jié)了vue+webpack的實(shí)用技巧以及相關(guān)實(shí)例代碼分享,有興趣的朋友可以參考學(xué)習(xí)下。
    2018-04-04
  • vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案

    vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案

    今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue組件渲染與更新實(shí)現(xiàn)過程淺析

    Vue組件渲染與更新實(shí)現(xiàn)過程淺析

    這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-03-03
  • 淺析在Vue中watch使用的必要性及其優(yōu)化

    淺析在Vue中watch使用的必要性及其優(yōu)化

    這篇文章主要來和大家深入討論一下在Vue開發(fā)中是否有必要一定用watch,如果換成watcheffect會(huì)如何,文中的示例代碼講解詳細(xì),需要的可以參考下
    2023-12-12
  • Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解

    Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解

    這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07

最新評(píng)論