一、部署vue项目(pc端、移动端)->nginx服务
1.vue项目打包：
①打开【项目目录/config/index.js】文件，修改如下：
修改config/index.js文件
②在项目根目录下执行【npm build】进行打包，在dist/下生成所需的文件如下：
将他们zip打包为mobile.zip或其他。
2.将vue项目部署到linux
①项目位置：【cd /home/wwwroot/】（可以放置到其他位置）
②如果使用xshell工具，可通过【rz -y】命令上传本地文件到服务端
🌂将刚刚1中的mobile.zip放置到该目录下，通过【unzip -o mobile.zip -d ./mobile】命令解压。
二、java接口项目->tomcat服务
①将java项目打为war包
②放到/usr/local/tomcat80/webapps/（tomcat服务的相关目录）下
🌂启动tomcat服务
cd /usr/local/tomcat80/bin
./shutdown.sh #停止服务
./startup.sh #启动服务
④查看日志
cd /usr/local/tomcat80/logs
tail -f catalina.out
三、nginx服务配置
①配置mobile和pc的适配
# HTTPS server
server {
listen 443 ssl ;
server_name localhost;
ssl_certificate 2433377_wm25.pgscn.net.pem;
ssl_certificate_key 2433377_wm25.pgscn.net.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
server_name localhost;
charset utf-8;
access_log logs/host.access.log;
location / {
# root html/pc; #html/pc路径前没有/，是相对路径，为/usr/local/nginx/下的文件，也就是nginx的安装路径
root /home/wwwroot/pc;#绝对路径
if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC\-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT\-)|(SonyEricsson)|(NEC\-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi\-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG\-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC\-)|(SED\-)|(EMOL\-)|(INNO55)|(ZTE)|(iPhone)|£¨HUAWEI£©|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" ){
# root html/mobile;
root /home/wwwroot/mobile; #适配到移动端的
}
if ( $http_user_agent ~ "(iPad)|(Pad)|(IPAD)|(PAD)"){
#root html/pc;
root /home/wwwroot/pc;#适配到pc端的
}
index index.html index.htm;
try_files $uri $uri/ /index.html; #解决项目刷新时候404的问题，找不到文件就指向项目下的index.html文件重新路由
}
②vue项目访问java接口->nginx代理转发
location /api/ { #当遇到/api/时，跳转到如下路径
proxy_pass 'http://127.0.0.1:9090/polycom_wemeet/';#9090是tomcat的服务端口，polycom_wemeet是二中的java项目
}
location /wx/ {
proxy_pass 'http://127.0.0.1:8640/';
}
🌂二维码图片路径配置
location /cf_qrcode/{ #当访问 ip:port://cf_qrcode/img1.png，会指向 /home/wwwroot/cf_qrcode/img1.png
root /home/wwwroot/;
autoindex on;
}
error_page 404 /index.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
网友评论