部署vue项目到阿里云服务器-Toy模板网

这篇具有很好参考价值的文章主要介绍了部署vue项目到阿里云服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一般前端工程师只会使用npm run serve 在开发环境下验证，那么如何把npm run build 打出的包部署到服务器上进行上线呢？这篇文章就详细阐述这一流程。

1. 购买或试用阿里云服务器

作为新用户可以试用一个月阿里云服务器，阿里云官方网址如下：https://www.aliyun.com/?utm_content=se_1008364713

如果想试用的话需要实名认证，按步骤实名认证一下就可以了。

我们试用阿里云ESC服务器(选择CentOS)，按步骤试用，稍等几分钟就会收到短信，创建实例成功。如下所示：

部署vue项目到阿里云服务器

登录到阿里云服务器，直接点击远程连接选择workbench远程连接就可以了。

部署vue项目到阿里云服务器

登录后会看到如下界面：

部署vue项目到阿里云服务器

2. 安装Nginx

安装Nginx会依赖其他软件包，例如pcre，zlib, openssl等，安装命令如下：

yum install gcc-c++ 
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

用wget 下载Nginx，解压，编译，安装：

wget -c https://nginx.org/download/nginx-1.12.0.tar.gz
tar -zxvf nginx-1.12.0.tar.gz
cd nginx-1.12.0
./configure
make
make install

可能在make的时候会报2个错误，在网上搜一下就解决了。大概记得第一个错误的解决方法是在一个MakeFile中删除-Werror，第二个错误是注释一行代码就可以了。

可以用whereis 命令查看Nginx安装在哪了，一般会安装到/usr/local/目录下，接下来就启动Nginx，并打开默认页面：

cd /usr/local/nginx/sbin/
./nginx

在浏览器地址栏输入阿里云公网ip地址就会看到Nginx默认欢迎页面了。但不幸的是，打不开。

需要做如下配置：

1）改一下Nginx的服务器端口 80改为88，server_name改为公网ip地址

vim /usr/local/nginx/conf/nginx.conf

如下所示：

部署vue项目到阿里云服务器

2）在阿里云服务器管理平台手动添加一个端口配置

安全组-> 配置规则 -> 手动添加

如下所示：

部署vue项目到阿里云服务器

这样在浏览器地址栏输入ip地址+端口号就能打开Nginx默认欢迎页面了。

3. vue项目打包

直接npm run build就可以了。记得在vue.config.js中配置publicPath: "/",

如果vue-router 使用history模式，在new vue-router的时候记得做如下配置：

export default new Router({
  mode: 'history',
  base: '/',
  // base: process.env.BASE_URL,
  routes

})

4. 用xftp把包上传到阿里云服务器Nginx安装目录下的/html目录

在xftp新建会话时，

1）主机名填我们开始在阿里云服务器公网IP地址

2）协议我们选择SFTP

3）端口号默认是22，不用修改

4）用户名和密码填写我的在阿里云服务器设置的，一般用户名在没有修改的情况下都是root。

如果vue项目build出的包放在/home/dist目录下，那么相应配置文件也需要修改：

部署vue项目到阿里云服务器

这样在浏览器中直接输入ip地址+端口号就可以看到我们的vue项目啦。如下所示：

部署vue项目到阿里云服务器

5. 解决刷新页面出现404错误问题

在刷新页面的时候发现出现了404错误，这是Nginx配置有问题，需要增加如下配置：

        

        location / {
            root   html;
            try_files $uri $uri/ @router;  //不加这行刷新页面会出现404错误
            index  index.html index.htm;
        }

        //路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        //因此需要rewrite到index.html中，然后交给路由再处理请求资源
        location @router {
           rewrite ^.*$ /index.html last;  
        }