1,远程服务器中安装nginx
2,本地打包项目
本地打包项目:
npm run build
生成一个dist文件夹,默认是dist文件夹。
将这个文件夹进行压缩生成dist.zip
将这个zip文件通过xftp传输到服务器上。
对其进行解压。
修改Nginx的conf文件
vi /usr/local/nginx/conf/nginx.conf
#修改内容
server {
# 声明监听的端口
listen 80;
# 如有多域名映射到同一端口的,可以用server_name 区分,默认localhost
server_name localhost;
# 匹配'/'开头的路径 注意设定 root路径是有dist的
location / {
# 指定文件的根目录,主要结尾不要带/ 我的项目是放再了/usr/local/my_project目录下
root /usr/local/my_project/dist;
# 指定默认跳转页面尾 /index.html
index /index.html;
}
# 匹配'/adminApi'开头的路径进行跨域 ip和port自行替换
# adminApi 是vue.config.js中的proxy声明的
location /adminApi {
proxy_pass http://ip:port;
}
}
3,看nginx配置是否生效
# 进入nginx 安装目录,yum安装的直接使用nginx代替sbin/nginx
# 检查配置文件合法性
sbin/nginx -t
# nginx 热更新配置
sbin/nginx -s reload