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

Honwhy 發布于2019-07-25 14:24 / 3616人閱讀

摘要：這個方法我沒有嘗試過，不過應該是可行的這樣的優點是很簡便，適合小型的網站項目將打包的項目和服務端分別部署客戶端根目錄主頁避免模式刷新管理控制后臺服務端跨域這樣部署雖然稍微麻煩一點，但可以適應很多場景，而且開發分工更方便，結構也一目了然

我個人想了2種部署方案

1、將vue項目打包后放入node服務端的靜態資源中訪問

整體結構基本是這樣的

這樣在云主機上的nginx配置就很簡單

server {
    listen 80;
    # 你的域名
    server_name xxxxx.com;
    
    location / {
        # 你的node服務進程
        proxy_pass http://localhost:8088;
    }
}

但這樣有一個問題，如果你的vue-router是history模式的話，你刷新或者手動輸入url訪問將會是404，你也很難通過修改nginx配置來規避這個錯誤（因為并不需要在nginx配置里面指定根目錄）

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

對于 Node.js/Express，請考慮使用 connect-history-api-fallback 中間件。

這個方法我沒有嘗試過，不過應該是可行的！

這樣的優點是很簡便，適合小型的網站項目

2 將打包的vue項目和node服務端分別部署

server {
    listen 80;
    server_name xxx.com;
    # 客戶端
    location / {
            # 根目錄
            root html/client;
            # 主頁
            index index/html index/htm;
            # 避免history模式刷新404
            try_files  $uri $uri/ /index.html;
    }
    # 管理控制后臺
    location /admin {
            root html/admin;
            index index/html index/htm;
            try_files  $uri $uri/ /index.html;
    }
    # 服務端
    # 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";
    }

}

這樣部署雖然稍微麻煩一點，但可以適應很多場景，而且開發分工更方便，結構也一目了然

云服務器 GPU云服務器 node部署到云主機 node.js怎么部署到云主機上 node部署到云vps node.js怎么部署到云vps上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/40066.html

vue-router改為history模式

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

yunhao 2019-08-23 10:52 評論0 收藏0
Vue項目部署遇到的問題及解決方案

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

姘擱『 2019-08-23 14:38 評論0 收藏0
webpack4.x升級摘要

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

levinit 2019-08-23 18:11 評論0 收藏0
Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩年前...

Richard_Gao 2019-05-22 18:23 評論0 收藏0