vue前端連接前端如何部署_怎麼把VUE項目部署到伺服器上面

⑴ 安裝Vue創建前端項目

上一節安裝了flask，我們現在需要安裝vue前端框架，需要使用vue-cli方便安裝和管理。

先要全局安裝vue-cli，可以使用下列任一命令安裝這個新的包：

你還可以用這個命令來檢查其版本是否正確 (3.x)：

官方文檔
已經安裝最新版本的vue-cli，我很推薦這個圖形化界面，非常方便。
你也可以通過 vue ui 命令以圖形化界面創建和管理項目：

圖形化的界面就不需要多介紹了，有中文都能很好地使用。

使用Vue項目管理器，選擇項目地址flask-vue根目錄（上節運行flask示例的文件夾），創建新項目名稱vue。根據具體需求選擇創建條件完成項目創建，自動跳轉至項目詳情頁。

下一節Flask與Vue的關聯。

⑵ 前端vue與後端Thinkphp在伺服器的部署

vue在服務端部署時，我們都知道通過npm run build 指令打包好的dist文件，通過http指定是可以直接瀏覽的，Thinkphp通過域名指向index.php文件才可以瀏覽。要使前端正常調用後端數據，有兩種方法：1、前端跨域調用後端數據，2、前端打包文件部署在後端的伺服器文件夾下（同域）。

web伺服器： apache

一、跨域

在伺服器配置站點：

在路徑/home/www/  下創建test項目文件夾，用來放項目文件。

找到httpd-vhosts.conf文件配置站點

前端站點：

    ServerName test.test.com

    DocumentRoot "/home/www/test/dist"

    DirectoryIndex index.html

後端站點：

    ServerName test.testphp.com

    DocumentRoot "/home/www/test/php"

    DirectoryIndex index.php

將前端打包好的dist文件放在/home/www/test/ 文件夾下，運行http://test.test.com可瀏覽，當路徑改變時，刷新會出現404錯誤。此時dist文件下創建一個.htaccess文件，當路徑不存在時，路徑指向http://test.test.com/index.html能解決此問題。

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.html [L]

在/home/www/test文件夾下創建項目根目錄php文件夾，將thinkphp文件放在php下。TP5的入口文件在public文件下，在這將public下的入口文件index.php挪到php文件夾下（個人習慣將入口文件放在項目根目錄）, 後端綁定Index模塊。

前端調用後端介面，存在跨域，跨域解決方法有好幾種，在這我將在後端php做配置，解決跨域問題，在公用控制器設置跨域配置：

class Common extends Controller

{

    public $param;

    // 設置跨域訪問

    public function _initialize()

    {

        parent::_initialize();

        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';

        header('Access-Control-Allow-Credentials: true');

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");

$param =  Request::instance()->param();

$this->param = $param;

    }

}

前端調用登錄介面： this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定義介面：http://test.testphp.com/index.php/)

二、同域

後端配置同上，公共配置器中的header配置注釋。將前端的dist文件下的所有文件（包含.htaccess），放在php文件夾下。將後端index控制器的index方法的路徑重定向php下的index.html文件：

namespace app\index\controller;

use think\Controller;

class Index extends Controller

{

    public function index() {

$this->redirect('/index.html');

    }

}

前端調用登錄介面： this.axios.post('/index.php/base/login', {user: '', password: ''})

轉自：https://blog.csdn.net/qq_35465132/article/details/78986675

⑶ gitLab CI/CD docker自動部署vue前端項目

查詢了好多資料，都沒有找到可以直接應用的，綜合了好多，配置runner之後，前端項目裡面需要在項目根目錄配置三個文件：

1..gitlab-ci.yml 文件

stages:

- build

- deploy

# 設置緩存

cache:

paths:

- node_moles/

- dist/

# 安裝依賴 before_script 會在每個 stages 執行之前運行

before_script:

- npm install

# 編譯這里對應上方 stages ，

build:

stage: build

script:# script 為要執行的命令，可以多條按順序執行

- npm run build:prod

docker-deploy:

stage: deploy

# 執行Job內容

script:

# 通過Dockerfile生成pactera_pflife_ui鏡像

- sudo docker build -t pactera_pflife_ui .

# 刪除已經在運行的容器

- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi

# 通過鏡像啟動容器

- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui

tags:

# 執行Job的伺服器

- pflife-web

only:

# 只有在master分支才會執行

- dev_xht

2.Dockerfile 文件

# 設置基礎鏡像

FROM nginx:latest

# 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面

COPY dist/ /usr/share/nginx/html

# 用本地的 default.conf 配置來替換nginx鏡像里的默認配置

COPY default.conf/etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx","-g","daemon off;"]

3.default.conf文件

server {

listen 80;

server_name 39.100.9.6; # localhost修改為docker服務宿主機的ip

location / {

root /usr/share/nginx/html;

index index.html index.htm;

try_files $uri $uri/ /index.html =404;

}

location /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://39.100.9.6:8090/;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

}

總之，三個文件部署之後運行正常

⑷ vuejs怎麼在伺服器部署

既然是布署，哪默認就應該是生產環境下的布署，vue開發的應用本質上就是靜態文件,無論你用何種web伺服器，放上去就應該能通過http訪問

接下來我來幫大家來捋一捋

首先VUE 是一個javascript的前端框架，註定了它是運行在瀏覽器里的，對伺服器本地沒有任何要求，只要一個靜態文件伺服器能通過http訪問到其資源文件就足矣！無論你是用apache ,ngnix 就算你要用node 自己實現一個靜態文件伺服器，也用不了多少行代碼。

npm run dev 是用來在本地開發的時候做調試用的，vue開發的是前端的東西，不是nodejs 服務端程序，按道理講，生產環境里就不該存在npm，甚至nodejs也不需要（用nodejs來做web靜態服務的除外），樓主通過ssh進入到伺服器里，再運行npm run dev 來啟動哪是開發機上做的事情。正確的做法很簡單，通過npm run build 把生成的dist文件夾（不要上傳文件夾）里的內容上傳到http伺服器上就可以通過 http來訪問了，開發機上正常，上傳以後程序出現錯誤不能運行的原因99.99%的可能性是你引用資源的路徑有問題。

一般如果vue框架的程序上傳到網站伺服器的根目錄下是不會有問題的，也不存在資源文件引用錯誤的情況，但如果你不是根目錄，就會有問題，通過vue-cli 生成的開發目錄，build以後默認引用資源文件的路徑是

有更多疑問」可以咨詢」小鳥雲，它是的一家伺服器廠商，我一直在用他們產品！

⑸ 怎麼把VUE項目部署到伺服器上面

1.使用xshell登錄到阿里雲伺服器。安裝nginx（本文安裝到/etc下）

[plain]view plain

cd/etc
apt-getupdate
apt-getinstallnginx

2.首先先配置nginx，然後再根據配置文件做下一步操作

打開/etc/nginx/nginx.conf文件

[plain]view plain

vim/etc/nginx/nginx.conf

在nginx.conf中配置如下：

[plain]view plain

userwww-data;
worker_processesauto;
pid/run/nginx.pid;
events{
worker_connections768;
#multi_accepton;
}
http{
##
#BasicSettings
##
tcp_nodelayon;
keepalive_timeout65;
types_hash_max_size2048;
#server_tokensoff;
#server_names_hash_bucket_size64;
#server_name_in_redirectoff;
include/etc/nginx/mime.types;
default_typeapplication/octet-stream;
##
#SSLSettings
##
ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE
ssl_prefer_server_cipherson;
##
#LoggingSettings
##
access_log/var/log/nginx/access.log;
error_log/var/log/nginx/error.log;
##
#GzipSettings
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
##
#VirtualHostConfigs
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
#gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;
##
#VirtualHostConfigs
##
include/etc/nginx/conf.d/*.conf;
include/etc/nginx/sites-enabled/*;
#以下為我們添加的內容
server{
listen80;
server_nameyour-ipaddress;
root/home/my-project/;
indexindex.html;
location/datas{
rewrite^.+datas/?(.*)$/$1break;
includeuwsgi_params;
proxy_passhttp://ip:port;
}
}
}

接下來就根據配置文件進行下一步工作。配置文件中的server_name後面是阿里雲伺服器的ip地址

3.配置文件中的listen是nginx監聽的埠號，所以需要在阿里雲伺服器上為80埠添加安全組規則

在本地的瀏覽器登錄阿里雲伺服器->進入控制台->點擊安全組->點擊配置規則->點擊添加安全組規則，之後配置如下（註：入方向和出方向都要配置）

4.配置文件中的root和index那兩行表示我們把項目文件夾放在/home/my-project下

例如有兩個項目文件夾分別為test1，test2，裡面都有index.html。則目錄結構如下

/home

|--my-project

|--test1

|--index.html

|--test2

|--index.html

則在瀏覽器輸入http://ip/test1/index.html

伺服器便會在/home/my-project中找到test1下的index.html執行；

如果在瀏覽器中輸入http://ip/test2/index.html

伺服器便會在/home/my-project中找到test2下的index.html執行；

這樣便可以在伺服器下放多個項目文件夾。

5.所以我們也需要在本地項目的config/index.js里的build下進行修改,如果要把項目放到test1下，則

[javascript]view plain

assetsPublicPath:'/test1/',

如果用到了vue-router，則修改/router/index.js

[javascript]view plain

exportdefaultnewRouter({
base:'/test1/',//添加這行
linkActiveClass:'active',
routes
});

6.nginx配置文件中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據，例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下

[javascript]view plain

consturl='/datas/seller';
this.$http.get(url).then((response)=>{
.....
});

7.修改後在本地命令行下運行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上傳到伺服器的/home/my-project/test1下，目錄結構如下

/home

|--my-project

|--test1

|--index.html

|--static

8.啟動nginx

[plain]view plain

servicenginxstart

9.至此項目部署成功，在瀏覽器下輸入: http://ip/test1/index.html 即可

⑹ django+vue前後端分離項目部署

後端用的drf，使用的是uwsgi+nginx

進入伺服器項目文件目錄下，我的django項目放在了「/usr/myProjects/」目錄下了。在manage.py同級目錄下創建uwsgi.ini文件，配置如下：

測試效果命令：

如果訪問：xxx.xxx.xxx.xx:8000 成功，則uwsgi.ini配置成功

我的nginx.conf所在位置是「/etc/nginx/nginx.conf」
配置文件如下：

1、第一行

主要就是給nginx加許可權，vue部署後使用history路由時會去掉地址後面的『#』號，打包部署後不加許可權會有bug。
2、如配置所示，有兩個Server，分別部署了前端服務，和後端服務，值得注意的是兩個Server用的是同一個伺服器，監聽的埠不同。
3、vue部署需要注意的是反向代理地址：

以及後面的埠問題

4、後端的Server需要注意location中的uwsgi_pass 後面的埠號要和uwsgi.ini中配的相同，否則監聽不到

5、後端跨域問題。如果遇到跨域需要自己網上找配置，我的沒遇到，可能是因為我在django的settings中配置了跨域。
6、django-suit後台管理樣式崩了，需要改，但是api可以正常訪問，這個有空再說
7、我開始後台監聽的是8008埠，vue前端監聽的是80埠，這樣前端顯示好看。然而問題出現了，雖然後台api可以正常訪問，vue的本地開發環境也能正常運行且文字、圖片資源均顯示正常，但是前端vue打包線上部署後，文字信息顯示正常，圖片信息缺失8008埠，導致顯示不出來。為圖方便我選擇了前端監聽8008埠，後端監聽80，部署後顯示正常。原因不太清楚///////有空再說吧。
8、不要問我為啥都前後端分離了還部署到一個伺服器上？窮，而且只是測試，沒必要
9、此文僅適合入門

關於django後台admin（suit）缺失的修改（參考：django中文網： https://www.django.cn/article/show-4.html ）

在環境中進入項目目錄，需要收集css樣式，在終端輸入命令：

接下來你就回發現static文件中包含了css文件，此時再打開網站，樣式顯示正常

uWSGI 通過 xxx.ini 啟動後會在相同目錄下生成一個 xxx.pid 的文件，裡面只有一行內容是 uWSGI 的主進程的進程號。

關於uwsgi,進入同屆目錄下

教訓

獲取不到環境，那就指定環境

另外：記得重啟uwsgi，重啟Nginx，實在不行就先把監聽的埠kill掉再重啟
暴力刪埠：fuser -k 80/tcp

netstat -aptn命令行，查看所有開啟的埠號

netstat -ntlp | grep 80 查看具體的埠是否使用
ps -ef | grep uwsgi 查看是否有uwsgi埠存在

⑺ 前端vue+後台管理系統怎麼上線

想要將前端Vue + 後台管理系統上線，需要以下步驟：

將前端Vue程序打包為靜態文件，使用npm或yarn運行命令： npm run build或yarn build。
在你的伺服器上，可以使用FTP或SCP等工具將靜態文洞信件上傳到伺服器。
配置伺服器以在Web伺服器（例如Apache或Nginx）上提供靜態文件。
將後台管理系統部署到伺服器上（例如Node.js），並確保其在需納拍輪要時訪問Vue的靜態文件。
配置賀輪Web伺服器以將所有HTTP請求轉發到伺服器上運行的後台管理系統。
配置Web伺服器以使用SSL證書（如Let』s Encrypt）啟用HTTPS加密連接（推薦）。

通過這些步驟，您可以將Vue +後台管理系統部署到生產環境中並運行。

vue前端連接前端如何部署

與vue前端連接前端如何部署相關的內容