成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

vue vue-router(history模式) node(express)項(xiàng)目部署到云主機(jī)上的n

Honwhy / 3629人閱讀

摘要：這個(gè)方法我沒(méi)有嘗試過(guò)，不過(guò)應(yīng)該是可行的這樣的優(yōu)點(diǎn)是很簡(jiǎn)便，適合小型的網(wǎng)站項(xiàng)目將打包的項(xiàng)目和服務(wù)端分別部署客戶端根目錄主頁(yè)避免模式刷新管理控制后臺(tái)服務(wù)端跨域這樣部署雖然稍微麻煩一點(diǎn)，但可以適應(yīng)很多場(chǎng)景，而且開(kāi)發(fā)分工更方便，結(jié)構(gòu)也一目了然

我個(gè)人想了2種部署方案

1、將vue項(xiàng)目打包后放入node服務(wù)端的靜態(tài)資源中訪問(wèn)

整體結(jié)構(gòu)基本是這樣的

這樣在云主機(jī)上的nginx配置就很簡(jiǎn)單

server {
    listen 80;
    # 你的域名
    server_name xxxxx.com;
    
    location / {
        # 你的node服務(wù)進(jìn)程
        proxy_pass http://localhost:8088;
    }
}
但這樣有一個(gè)問(wèn)題，如果你的vue-router是history模式的話，你刷新或者手動(dòng)輸入url訪問(wèn)將會(huì)是404，你也很難通過(guò)修改nginx配置來(lái)規(guī)避這個(gè)錯(cuò)誤（因?yàn)椴⒉恍枰趎ginx配置里面指定根目錄）

解決辦法：
vue官方
基于 Node.js 的 Express

對(duì)于 Node.js/Express，請(qǐng)考慮使用 connect-history-api-fallback 中間件。

這個(gè)方法我沒(méi)有嘗試過(guò)，不過(guò)應(yīng)該是可行的！

這樣的優(yōu)點(diǎn)是很簡(jiǎn)便，適合小型的網(wǎng)站項(xiàng)目

2 將打包的vue項(xiàng)目和node服務(wù)端分別部署 
server {
    listen 80;
    server_name xxx.com;
    # 客戶端
    location / {
            # 根目錄
            root html/client;
            # 主頁(yè)
            index index/html index/htm;
            # 避免history模式刷新404
            try_files  $uri $uri/ /index.html;
    }
    # 管理控制后臺(tái)
    location /admin {
            root html/admin;
            index index/html index/htm;
            try_files  $uri $uri/ /index.html;
    }
    # 服務(wù)端
    # api 
    location /api {
            proxy_pass   http://localhost:8088;
            # 跨域
            add_header "Access-Control-Allow-Origin" "*";
            add_header "Access-Control-Allow-Credentials" "true";
            add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
            add_header "Access-Control-Allow-Headers" "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type";
    }

}

這樣部署雖然稍微麻煩一點(diǎn)，但可以適應(yīng)很多場(chǎng)景，而且開(kāi)發(fā)分工更方便，結(jié)構(gòu)也一目了然

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40066.html

相關(guān)文章

  • vue-router改為history模式

    摘要：打包好后本地測(cè)試運(yùn)行是否正常環(huán)境搭建這個(gè)時(shí)候需要利用中的方法如下安裝最新版本中將命令工具分家出來(lái)了還需要安裝一個(gè)命令工具創(chuàng)建一個(gè)工程進(jìn)入項(xiàng)目主目錄安裝必備包啟動(dòng)程序把打包后的文件夾放在文件夾里訪問(wèn)就能看到項(xiàng)目了這樣測(cè)試好了后就可以丟后 打包好后本地測(cè)試運(yùn)行是否正常環(huán)境搭建： 這個(gè)時(shí)候需要利用node中的express,方法如下: 安裝express: npm install -g ex...

    yunhao 評(píng)論0 收藏0

  • Vue項(xiàng)目部署遇到的問(wèn)題及解決方案

    摘要：模式部署沒(méi)有什么問(wèn)題，只要訪問(wèn)到服務(wù)器上的，就可以訪問(wèn)網(wǎng)站了。問(wèn)題起因在做年度賬單項(xiàng)目的時(shí)候，項(xiàng)目部署的時(shí)候，用的是模式。這樣幾項(xiàng)配置后，就可以在子目錄下訪問(wèn)網(wǎng)站，刷新也沒(méi)有問(wèn)題。 寫(xiě)在前面 Vue-Router 有兩種模式，默認(rèn)是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號(hào)。比如 http://www.example/#/hello，...

    姘擱『 評(píng)論0 收藏0

  • webpack4.x升級(jí)摘要

    摘要：以為例，編寫(xiě)來(lái)幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類(lèi)庫(kù)使用各種模塊化寫(xiě)法以及語(yǔ)法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開(kāi)發(fā)工程師 在那個(gè)時(shí)代，大家可能...

    levinit 評(píng)論0 收藏0

  • Vue+Express全棧購(gòu)物商城

    摘要：一前言提綱基于和框架寫(xiě)的一個(gè)全棧購(gòu)物商城，記錄項(xiàng)目過(guò)程中遇到的一些問(wèn)題以及經(jīng)驗(yàn)和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認(rèn)證機(jī)制，來(lái)實(shí)現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來(lái)代理。申請(qǐng)證書(shū)全站升級(jí)到，配置的協(xié)議。一、前言提綱 基于Vue和Express框架寫(xiě)的一個(gè)全棧購(gòu)物商城，記錄項(xiàng)目過(guò)程中遇到的一些問(wèn)題以及經(jīng)驗(yàn)和技巧。 二、歷史版本 基于Vue-CLI2.0:點(diǎn)我查看 這個(gè)分支版本是一兩年前...

    Richard_Gao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<