Vue项目部署服务器

环境

vue 2.6.14
nginx 1.26.0

配置nginx

• 准备一个服务器实例

• 安装nginx所需依赖

yum -y install pcre*
yum -y install openssl*

• 下载wget

yum install wget

• 下载nginx到/usr/local

cd /usr/local
wget http://nginx.org/download/nginx-1.26.0.tar.gz

• 解压并安装

tar -zxvf nginx-1.26.0.tar.gz
cd nginx-1.26.0
./configure
make && make install

• 进入nginx并启动

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

开放端口

以阿里云为例

设置安全组-80端口默认开放

如果未配置可以自行设置

打包vue项目

• 在vue项目目录下执行

npm run build

• 将生成的dist目录上传到服务器/usr/local/nginx/html目录下，最好将dist目录下的所有文件复制到服务器，而不是将dist放到html，否则要在配置nginx中多一级目录

配置nginx

• 编辑配置文件 默认路径/usr/local/nginx/conf/nginx.conf

vi /usr/local/nginx/conf/nginx.conf

• listen修改端口（默认80）

listen  80;

• server_name：如果你有域名，可以设置为你的域名，例如 yourdomain.com www.yourdomain.com。如果没有域名，只想通过 IP 地址访问，可以设置为 _ 或者你的服务器 IP 地址，默认localhost

server_name  localhost;

• root将root指令指向存放dist的文件夹，如果没有将dist的文件拆出来那就得在后面多加一级/dist

root html# 或者绝对路径
root /usr/local/nginx/html

• index：指定默认的索引文件。对于 Vue项目默认是 index.html

index  index.html index.htm;

• 重启nginx

/usr/local/nginx/sbin/nginx -s reload

现在浏览器输入服务器公网ip或者域名即可访问vue项目