前端项目上传服务器

1、npm run build 打包静态资源打包为dist文件夹2、把dist文件夹放在云服务器的/var/dist/项目名称3、把接口文件放在var/node-login里node-login是新建的文件夹需要进入到此目录npm init -y (初始化一个package.json)4、安装里面需要用到的安装包比如npm install express cors jsonwebtoken5、 安装进程托管工具 pm2 npm install pm2 -g6、 启动你的登录接口 pm2 start index.js --name node-api (启动node接口命名login-api)7、设置服务器开机自动启动 pm2 startup pm2 save8、vue.config.js或者vite.config.js里代理设置需要在/etc/nginx里的nginx.conf里配置服务器默认是80端口如果多个项目可以写多个serve配置不同的端口如81server {listen 80;listen [::]:80;server_name _;root /usr/share/nginx/html;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;error_page 404 /404.html;location /404.html {}error_page 500 502 503 504 /50x.html;location /50x.html {}location /{root /var/qyou;index index.html index.html;try_files $uri $uri/ /index.html; #解决刷新404}location /too/{#设置代理目标proxy_pass https://3g.163.com/;}location /boo/{#设置代理目标proxy_pass https://www.qyer.com/;}location /login/{#设置代理目标proxy_pass http://127.0.0.1:7788/login;}}server {listen 81;listen [::]:81;server_name 120.48.98.116;root /var/wangyi;index index.html;# 1. 优先写foo代理放在最上方最高优先级location ^~ /foo {rewrite ^/foo(.*)$ $1 break;proxy_pass http://127.0.0.1:3000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 2. 其次写api外网代理location /api/ {proxy_pass https://you.163.com/;proxy_set_header Host you.163.com;proxy_set_header User-Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_redirect off;}# 3. 静态资源缓存location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {expires 7d;add_header Cache-Control public;}# 4. 全局静态页面匹配必须放在所有代理location最后location / {try_files $uri $uri/ /index.html; #解决刷新404}}