Linux 部署vue项目(使用nginx)
目录
1.部署Nginx
请参考Linux下部署nginx,此处不再重复
2.Vue项目打包
本处使用npm打包,yarn打包看这里
npm run 后跟的参数在package.json文件中的scripts定义,常见使用的是dev、build:prod、build:stage……
# 当项目未设置分环境部署时
npm run build
# 当项目分环境部署时,打包正式环境
npm run build:prod
# 当项目分环境部署时,打包预发布环境
npm run build:stage
3. 部署时可能会发现资源路径不对 ,只需修改 vue.config.js下 文件资源路径
# vue3默认没有 vue.config.js,则需要在根目录下创建该文件
# 请根据自己路径来配置更改
publicPath: './'
4. 将打包后的dist文件夹上传至服务器
本次项目路径为 /usr/local/webapp/
5.修改Nginx的conf文件
忘记nginx安装目录的使用 ps -ef | grep nginx
查看。yum安装的默认在/etc/nginx/nginx.conf
vi /usr/local/nginx/conf/nginx.conf
# 修改如下
# 新建一个服务
server {
# 声明监听的端口
listen 80;
# 如有多域名映射到同一端口的,可以用server_name 区分,默认localhost
server_name localhost;
# 匹配'/'开头的路径 注意设定 root路径是有dist的
location / {
# 指定文件的根目录,主要结尾不要带/
root /usr/local/webapp/dist;
# 指定默认跳转页面尾 /index.html
index /index.html;
}
# 匹配'/adminApi'开头的路径进行跨域 ip和port自行替换
# adminApi 是vue.config.js中的proxy声明的
location /adminApi {
proxy_pass http://ip:port;
}
}
6. 使配置生效
# 进入nginx 安装目录,yum安装的直接使用nginx代替sbin/nginx
# 检查配置文件合法性
sbin/nginx -t
# nginx 热更新配置
sbin/nginx -s reload