vue项目打包上传到服务器具体操作

这几天为了测试一个项目，自己尝试将前端项目打包放置到自己的服务器上，我用的是阿里云，下面也是以阿里云为例

使用的工具是xshell6+FileZilla

xshell6想免费试用就去下载家庭免费版  >官网下载

 

1.服务器

上传服务器，你首先得有个服务器吧，买一个也不贵，或者用公司的

2.安装好软件 xshell6  FileZilla

打开xshell 左上角新建，先输入主机IP (服务器ip)

用户身份验证登录，账号一般为root，只要你没修改过，密码如果忘记了，就自己去修改一下

重置密码的步骤      进入云服务器=>实例

执行下面命令
sudo apt-get install openssh-server
sudo apt-get install nginx

如果nginx 安装不上(一般阿里装不上)
执行下面四个命令(有判断选Y)
（下面代码四行最好自己手打，我复制粘贴出错了...）
apt-get update
apt-get upgrade
apt-get install nginx
service nginx start

3.nginx安装成功后，登录阿里云，进入控制台，修改安全组规则

3.1进入安全组

  

3.2添加安全组，端口自己设置

3.3 在Xshell中输入指令，进入文件，编辑配置文件

cd /etc/nginx/sites-enabled/

vim default

3.4修改保存

（vim default进入之后）

3.5 重启nginx，9000就可以访问了 

输入service nginx restart

4.在Filezilla中

4.1连接服务器

4.2进入 /etc/nginx/conf.d 目录

右键 创建新文件以.conf为后缀 例如：lf.conf

4.3文件夹中添加这段话

server{
        listen 9000;    #端口号
        server_name www.moblie.site;
        location / {
            index index.html;    #默认页面
            root /var/www/dist;   #根目录，
        }

}

 

4.4重启nginx服务service nginx restart，再次访问ip

5.打包项目

 打包前将需要配置的配置好，

npm run build

6.  Filezilla 中远程站点 搜索 /var/www 自己文件夹中dist文件直接拖进去

7.网页中访问自己服务器的ip