Vue前端部署

概述

通常做好前端开发后都需要部署到相应服务器上，那么如何部署呐？来看看

准备

首先准备项目所需的资源，比如Node、Nginx

Node用的是版本是12的，到官网下载即可

下载地址

设置淘宝镜像
npm config set registry http://registry.npm.taobao.org/

Nginx用的是1.22.0的到官网下载即可

部署

首先在命令行模式下打包vue项目
npm run build

接着将打包出来的dist文件夹下的文件复制到nginx下的html目录下

使用命令双击nginx服务或nginx -s reload重启动即可

nginx配置文件并未做修改，访问nginx根目录–localhost:80即可

备注

若不想将文件复制到需要自定义前端文件目录路径，修改conf下的nginx.conf配置文件即可，如

 server {
        listen       80;
        server_name  localhost;


        location / {
            root   D:/soft/nginx/tmp/dist;
            index  index.html index.htm;
        }
}

listen代表端口
server_name代表相应ip

localtion /代表位置
root代表文件路径
index代表首页