騰訊云上部署Vue項目

node -v檢查是否安裝成功，我安裝的是v10.24.0

成都創(chuàng)新互聯(lián)公司專注于天水網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供天水營銷型網(wǎng)站建設，天水網(wǎng)站制作、天水網(wǎng)頁設計、天水網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務，打造天水網(wǎng)絡公司原創(chuàng)品牌,更為您提供天水網(wǎng)站排名全網(wǎng)營銷落地服務。

進入nginx配置文件

vim /etc/nginx/conf.d/default.conf

部署vue文件

重啟nginx看效果

sudo nginx -s reload

配置https訪問域名

民間

騰訊云官方

Vue前臺服務器搭建

前言：Vue服務器采用nginx?Vue為服務器；

請確保你是以擁有 sudo 權限的用戶來登錄的服務器

請按照下面的步驟，在 CentOS 中安裝 Nginx。

類似于上面的內(nèi)容，遇到這種情況，輸入 y，然后 Enter（回車） 即可繼續(xù)安裝。

啟動 Nginx：

sudo systemctl start nginx

通過運行以下命令，來檢查 Nginx 的運行狀態(tài)：

sudo systemctl status nginx

然后會輸出類型下面的內(nèi)容: 其中Active：active代表運行， failed代表暫停

通過下面的命令來打開這兩個端口：

國內(nèi)的服務器廠商，安全組也可能會默認屏蔽這兩個端口，比如 阿里云 和 騰訊云，如果在 第 5 步 時發(fā)現(xiàn)無法訪問，可以自行百度一下如何放開這兩個端口。

你可以像管理其他服務那樣管理 Nginx。

啟動 Nginx

sudo systemctl start nginx

停止 Nginx

sudo systemctl stop nginx

重啟 Nginx

sudo systemctl restart nginx

修改 Nginx 配置后，重新加載

sudo systemctl reload nginx

設置開機啟動 Nginx

sudo systemctl enable nginx

關閉開機啟動 Nginx

sudo systemctl disable nginx

本文引用： # 2019 年如何在 CentOS 7 上安裝最新版 Nginx

注意：有可能會出現(xiàn)403 Forbidden，執(zhí)行 setenforce 0 設置SELinux 成為permissive模式

vue項目如何部署到服務器

第一步配置 vue.config.js

第二步修改路由，改為 hash模式

第三步文件打包,執(zhí)行以下，目錄中會出現(xiàn)一個dist文件夾，將文件拖到服務器的 root 文件夾中

第四步可以通過域名進行訪問

前端vue與后端Thinkphp在服務器的部署

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

web服務器： apache

一、跨域

在服務器配置站點：

在路徑/home/www/??下創(chuàng)建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/ 文件夾下，運行可瀏覽，當路徑改變時，刷新會出現(xiàn)404錯誤。此時dist文件下創(chuàng)建一個.htaccess文件，當路徑不存在時，路徑指向能解決此問題。

RewriteEngine?On??

RewriteBase?/??

RewriteRule?^index\.html$?-?[L]??

RewriteCond?%{REQUEST_FILENAME}?!-f??

RewriteCond?%{REQUEST_FILENAME}?!-d??

RewriteRule?.?/index.html?[L]??

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

前端調(diào)用后端接口，存在跨域，跨域解決方法有好幾種，在這我將在后端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;??

}??

}??

前端調(diào)用登錄接口： this.axios.post('', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定義接口：)

二、同域

后端配置同上，公共配置器中的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');??

}??

}??

前端調(diào)用登錄接口： this.axios.post('/index.php/base/login', {user: '', password: ''})

轉(zhuǎn)自：

當前名稱：騰訊云服務器部署vue 騰訊云服務器部署微信小程序
分享URL：http://www.chinadenli.net/article34/dddsgse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)頁設計公司、微信小程序、網(wǎng)站建設、移動網(wǎng)站建設、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)