如何将vue项目部署到服务器上

最终结果：输入mi.jialilili.cn就能访问到该项目

一、设置安全组，开放相应端口

   我用的是百度的服务器（centOS)，首先得进行域名解析，配置二级域名，还要打开相应的端口，在云服务器的安全组里设置，图怎么有点不清楚

  之后打开gitbash，开始连接服务器，输入

ssh root@‘ip地址’

 再输入密码，如下图，连接成功！

二、安装nginx

 若服务器没有安装nginx，可以用以下指令安装，检查nginx配置

yum install nginx   //安装

which nginx         //查看nginx被安装到哪

 

我的是安装在/usr/sbin/nginx文件夹内，可以输入这个路径开启nginx

nginx -t        //查看nginx配置是否正确

 

显示successful，nginx配置成功！ 之后便可以开启nginx了。

启动页面如上图所示，即为开启成功！ 

前期准备

    cd /，进入到根目录创建一个workspace文件夹，内部再创建一个mimall的文件夹，用来上传我们的项目。

    之后cd /etc/nginx/中继续创建一个vhosts文件夹，内部再创建一个mi.jialilili.conf的一个配置文件，用来装二级域名的配置。

mkdir vhosts        //新建文件夹

 几个特殊的文件夹

    1、nginx默认页面的存放位置，我的是在/usr/share/nginx/，我们可以在nignx.conf配置文件中更改默认页面的路径（修改server里的root）。

    2、nginx配置文件在/etc/nginx/nginx.conf里，输入以下命令查看配置文件

cd /etc/nginx/
ls
cat nginx.conf

    3、nginx命令的文件夹：/usr/sbin/nginx，可以输入这个路径，开启nginx

       nginx -s reload    不重启nginx的情况下，重新加载配置文件

       nginx -s stop     关闭nginx

三、修改配置

    进入到etc/nginx，输入vi nginx.conf更改配置，进入之后，按i键进入编辑模式，编辑完成按esc，输入:wq保存退出。

    nginx.conf文件做了部分改动（每一次修改配置都需要重新启动nginx，nginx -t 检查配置是否正确）：

  1、user值修改为root；

  2、server_name改为自己的ip，root改为根目录下的workspace文件夹;

  3、在nginx.conf文件后最后一行添加如下代码，配置二级域名

  二级域名的配置在mi.jialilili.conf文件里，内容如下，主要实现反向代理功能：

注意：proxy_pass http://mall-pre.springboot.cn/一定要在后面加 / 

四、上传文件

    我用的是xftp，把vue项目打包出来的dist文件夹下面的文件都上传到mimall里，注意workspace里得有index.html文件，不然会无法访问，可以把之前nginx默认的index.html赋值到该文件夹下。可以在xftp中直接复制粘贴，更方便！

关于项目打包：

  要在打包时在vue.config.js里加上publicPath: './'，不然无法正常访问页面，返回404

大功告成，现在就可以访问该网站了！