使用npm run build:prod命令来构建生产环境的版本。构建完成后，使用pm2来启动应用。pm2是一个流行的进程管理器，可以帮助管理和保持应用持续运行。
以下是如何使用npm run build:prod和pm2来构建并启动你的Vue应用的步骤：
1、npm run build:prod，这个命令会根据vue.config.js中的配置（如果有的话）和package.json中的scripts部分来构建你的应用。构建的结果通常会放在dist目录下。
2、构建完成后，你可以使用pm2来启动你的应用。首先，确保你已经安装了pm2。如果没有安装，可以通过以下命令安装：npm install pm2 -g
然后，创建一个pm2.config.js文件在你的项目根目录下，配置你的应用启动脚本。
3、启动应用。pm2 start pm2.config.js这个命令会根据pm2.config.js中的配置启动你的应用。
4、pm2 list查看应用状态
online的代表已经正常启动，name是pm2.config.js中的name字段配置的应用名称。
以上项目已经打包进了dist文件夹下，并且本地也启动了命令。
如果用live-server的方式访问dist的话，直接进入dist文件夹 输入live server 就能启动访问到打包后的项目
如果用本地nginx访问本地启动的项目，那么我们需要配置下nginx
我本地的nginx路径是/usr/local/etc/nginx
然后进入nginx.conf进行配置
server {
listen 8088; 我本地项目启动是8088端口
server_name quta.com; # 替换为你的域名
location / {
root /Users/fm/lths/fee-web/dist; # 替换为你的dist目录的路径
index index.html;
try_files $uri $uri/ /index.html;
}
}
配置完后执行sudo nginx -t检查一下nginx是不是成功配置
然后执行sudo nginx -s reload
在我执行重启nginx时报错了：
nginx: [error] invalid PID number "" in "/usr/local/var/run/nginx.pid"
我看了一下nginx.pid这个文件是空的，正常情况下里面应该有进程id,Nginx 在尝试启动时无法找到有效的进程ID（PID）,所以有这个报错，后来我执行了sudo nginx -c /usr/local/etc/nginx/nginx.conf 重新加载了nginx 配置，这个命令后再次重启就成功了
然后在浏览器输入http://quta.com/feeweb/quota就能访问到我们本地项目打包好的页面了
（这个项目在本地直接运行npm run dev 时的访问链接是http://本地ip:8088/feeweb/record）
想要知道服务器上的nginx部署在哪里，可以执行whereis nginx
假如项目已经部署到服务器10.9.10.50并且用pm2启动了，项目运行的端口号是3002
我们可以在upstream为这个项目写一个别名remote_pro_testin，然后在server中的location中配置proxy_pass http://remote_pro_testin，这样当我们访问server_name中写的remote.pro.testin.cn时就会指向服务器10.9.10.50的3002对应运行的项目
upstream remote_pro_testin {
server 10.9.10.50:3002 max_fails=3 fail_timeout=20s;
ip_hash;
}
server {
listen 80;
server_name remote.pro.testin.cn remote.saas.testin.cn;
#add_header Content-Type 'text/html; charset=utf-8';
location / {
add_header Content-Type 'text/html; charset=utf-8';
add_header Access-Control-Allow-Origin *;
#limit_conn addr 50;
proxy_pass http://remote_pro_testin;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ ^/(WEB-INF)/ {
deny all;
}
}
网友评论