資訊專欄INFORMATION COLUMN
摘要：這個方法我沒有嘗試過，不過應(yīng)該是可行的這樣的優(yōu)點是很簡便，適合小型的網(wǎng)站項目將打包的項目和服務(wù)端分別部署客戶端根目錄主頁避免模式刷新管理控制后臺服務(wù)端跨域這樣部署雖然稍微麻煩一點，但可以適應(yīng)很多場景，而且開發(fā)分工更方便，結(jié)構(gòu)也一目了然
我個人想了2種部署方案
1、將vue項目打包后放入node服務(wù)端的靜態(tài)資源中訪問整體結(jié)構(gòu)基本是這樣的
這樣在云主機上的nginx配置就很簡單
server {
listen 80;
# 你的域名
server_name xxxxx.com;
location / {
# 你的node服務(wù)進程
proxy_pass http://localhost:8088;
}
}
但這樣有一個問題，如果你的vue-router是history模式的話，你刷新或者手動輸入url訪問將會是404，你也很難通過修改nginx配置來規(guī)避這個錯誤（因為并不需要在nginx配置里面指定根目錄）
解決辦法：
vue官方
基于 Node.js 的 Express
對于 Node.js/Express，請考慮使用 connect-history-api-fallback 中間件。
這個方法我沒有嘗試過，不過應(yīng)該是可行的！
這樣的優(yōu)點是很簡便，適合小型的網(wǎng)站項目
2 將打包的vue項目和node服務(wù)端分別部署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;
}
# 服務(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";
}
}
這樣部署雖然稍微麻煩一點，但可以適應(yīng)很多場景，而且開發(fā)分工更方便，結(jié)構(gòu)也一目了然
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/40066.html
摘要：打包好后本地測試運行是否正常環(huán)境搭建這個時候需要利用中的方法如下安裝最新版本中將命令工具分家出來了還需要安裝一個命令工具創(chuàng)建一個工程進入項目主目錄安裝必備包啟動程序把打包后的文件夾放在文件夾里訪問就能看到項目了這樣測試好了后就可以丟后 打包好后本地測試運行是否正常環(huán)境搭建： 這個時候需要利用node中的express,方法如下: 安裝express: npm install -g ex...
摘要：模式部署沒有什么問題，只要訪問到服務(wù)器上的，就可以訪問網(wǎng)站了。問題起因在做年度賬單項目的時候，項目部署的時候，用的是模式。這樣幾項配置后，就可以在子目錄下訪問網(wǎng)站，刷新也沒有問題。 寫在前面 Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，...
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化，然后為你執(zhí)行一系列的自動化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代，大家可能...
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認證機制，來實現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看 這個分支版本是一兩年前...
閱讀 3697·2023-04-26 02:24
閱讀 1008·2023-04-25 14:47
閱讀 2670·2021-11-24 11:16
閱讀 1827·2021-11-24 09:38
閱讀 1679·2021-11-18 10:07
閱讀 2131·2021-09-22 15:49
閱讀 1664·2019-08-30 15:55
閱讀 963·2019-08-26 13:38
