Vue本地项目过程随笔(4) 部署到服务器

服务器购买,端口开放不再多讲 文件的上传使用Xftp。

工作经历内容用到的省略号特效

本地Vue项目打包,生成文件放在Vue项目目录下的dist文件夹

//在vs code 控制台内输入
npm run build

在阿里云服务器控制台内安装nodejs,端口开放在防火墙选项下

sudo yum install nodejs
node -v

安装nginx

npm install命令遇到relocation error: npm: symbol SSL_set_cert_cb的报错问题

改标签栏icon,以及标签名

安装完nginx后 用Xftp登陆服务器,上传打包好的项目。

在/etc/nginx下找到nginx.config文件

在文件内找到server{}段
 server {
        //端口号
        listen       80;
        //服务器公网ip
        server_name  123.56.69.132;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        //nginx在path为 / 下的访问路径
        location / {
        //打包好的Vue项目在服务器内的存放路径
    root /Vue/dist;
        }
        //配置404页面
        error_page 404 /404.html;
        location = /404.html {
        }
        //配置其他错误信息页面
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

保存,回到服务器控制台输入 重新运行nginx

nginx -s reload

现在可以通过ip地址访问到打包过的Vue项目了
我的项目链接:http://phantomcorner.tech
Github

你可能感兴趣的:(Vue本地项目过程随笔(4) 部署到服务器)