vue-cli项目上线到阿里云并配置Nginx服务器

我使用的是阿里云服务器CentOS 7.3 64位操作系统。

一、使用Xshell连接云服务器

1.百度下载一个Xshell和Xftp并安装。
2.双击打开Xshell，并新建一个连接。（主机就是阿里云上创建的实例的公网ip）
3.配置好主机后点击连接，输入登录名和密码，登录名就是购买服务器时输入的登录名和密码。
4.点击确定后即可成功连接到云服务器，连接成功如下图：

image.png

二、vue项目打包上线

1.当我们在本地完成项目开发，可以成功访问项目页面时，运行 npm run build 命令，可以看到项目下有一个dist文件夹，这就是vue项目打包后的文件。
2.在Xshell中点击xftp工具图标可打开文件界面。再次输入密码后可看到服务器端的文件夹目录。
3.把本地打包好的文件放到服务器中，我是放到opt目录下vue-website-pro项目下的，vue-website-pro是我的项目名称。

image.png

当我们按照上面步骤打包上线后，访问公网ip，是没法看到页面的。这是因为我们不可能通过一台电脑的ip就去访问电脑的文件，云服务器相当于就是一台电脑。所以我们还需要配置服务器代理，我是通过配置nginx实现的，除了nginx还有其他很多服务器也可以实现。如apache等。

三、nginx安装配置

1.在Xshell终端，也就是命令行窗口，输入命令 yum install nginx ，当需要确认时输入”y“回车。
2.安装完成后，输入 service nginx start 启动nginx服务。
3.通过命令 nginx -t 查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下

image.png

4.在命令行输入命令 cd /etc/nginx 切换到nginx目录下，再输入 cat nginx.conf 可查看当前nginx配置文件。
5.在nginx目录下，输入 vim nginx.conf 进入nginx配置编辑模式，然后按键盘 i 键，当命令行左下角出现-- INSERT-- 的时候，通过鼠标上下键进行文件修改，具体配置如下图：

• 我的vue本地跨域是

module.exports = {
    devServer:{
        proxy:{
            '/api':{
                target:'http://182.92.218.236/zhihu',
                pathRewrite:{
                    '^/api':''
                }
            }
        },
    },
    publicPath:'./'
}

• nginx配置

    server {
        listen       80;
        server_name  123.57.109.28;  //server_name是公网IP
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
        root /opt/vue-website-pro/dist/;  //root是dist文件夹所在目录
        try_files $uri $uri/ /index.html;    //如果没有使用vue-router则无需配置try_files
        }
        location /prod{
         proxy_pass http://182.92.218.236/zhihu;  //proxy_pass 是后台服务器地址
         add_header Content-Type "text/plain;charset=utf-8";
         add_header 'Access-Control-Allow-Origin' '*';
         add_header 'Access-Control-Allow-Credentials' 'true';
         add_header 'Access-Control-Allow-Methods' 'GET, POST';
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

6.当完成Nginx配置文件的修改后，按键盘ESC键退出编辑模式，然后输入 :wq 并回车，保存修改并退出。
7.修改完nginx配置文件后，需要输入 nginx -s reload 重启nginx配置。这里如果重启失败，可输入 nginx -c /etc/nginx/nginx.conf ，然后再次重启。

此时，再通过阿里云的公网ip访问，就可以看到我们的项目啦~