腾讯云上部署Vue项目

node -v检查是否安装成功，我安装的是v10.24.0

成都创新互联公司专注于天水网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供天水营销型网站建设，天水网站制作、天水网页设计、天水网站官网定制、微信小程序开发服务，打造天水网络公司原创品牌,更为您提供天水网站排名全网营销落地服务。

进入nginx配置文件

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

部署vue文件

重启nginx看效果

sudo nginx -s reload

配置https访问域名

民间

腾讯云官方

Vue前台服务器搭建

前言：Vue服务器采用nginx➕Vue为服务器；

请确保你是以拥有 sudo 权限的用户来登录的服务器

请按照下面的步骤，在 CentOS 中安装 Nginx。

类似于上面的内容，遇到这种情况，输入 y，然后 Enter（回车） 即可继续安装。

启动 Nginx：

sudo systemctl start nginx

通过运行以下命令，来检查 Nginx 的运行状态：

sudo systemctl status nginx

然后会输出类型下面的内容: 其中Active：active代表运行， failed代表暂停

通过下面的命令来打开这两个端口：

国内的服务器厂商，安全组也可能会默认屏蔽这两个端口，比如 阿里云 和 腾讯云，如果在 第 5 步 时发现无法访问，可以自行百度一下如何放开这两个端口。

你可以像管理其他服务那样管理 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

注意：有可能会出现403 Forbidden，执行 setenforce 0 设置SELinux 成为permissive模式

vue项目如何部署到服务器

第一步配置 vue.config.js

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

第三步文件打包,执行以下，目录中会出现一个dist文件夹，将文件拖到服务器的 root 文件夹中

第四步可以通过域名进行访问

前端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/ 文件夹下，运行可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个.htaccess文件，当路径不存在时，路径指向能解决此问题。

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('', {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');  

}  

}  

前端调用登录接口： this.axios.post('/index.php/base/login', {user: '', password: ''})

转自：

标题名称：腾讯云服务器部署vue 腾讯云服务器部署微信小程序
转载注明：http://ybzwz.com/article/dddsgse.html