Linux 部署vue项目(使用nginx)
Posted ColdSmog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Linux 部署vue项目(使用nginx)相关的知识,希望对你有一定的参考价值。
1.部署nginx
请参考Linux下部署nginx,此处不再重复
2.Vue项目打包
# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage
3. 部署时可能会发现资源路径不对 ,只需修改 vue.config.js下 文件资源路径
# 请根据自己路径来配置更改
publicPath: './'
4. 将打包后的dist文件夹上传至服务器
本次项目路径为 /usr/local/webapp/
5.修改Nginx的conf文件
vim /usr/local/nginx/cong/nginx.conf
#修改如下
server {
listen 80;
server_name localhost;
# 注意设定 root路径是有dist的
location / {
root /usr/local/webapp/dist;
index /index.html;
}
#跨域 ip和port自行替换
location /adminApi {
proxy_pass http://ip:port;
}
}
6. 使配置生效
sbin/nginx -s reload
sbin/nginx -s stop
sbin/nginx
7.访问ip地址查看效果
以上是关于Linux 部署vue项目(使用nginx)的主要内容,如果未能解决你的问题,请参考以下文章
vue项目发布采用gzip压缩文件部署到nginx无法运行问题