Web学习笔记
一、vue项目部署到nginx
-
确定服务器ip地址,和端口地址
a. ip:123.123.123.123
b. nginx监听的端口:8085
c. 服务部署端口:8125 -
编写nginx的配置文件
a. 注意监听的端口是8085
b. 服务接口与websocket的支持配置
#接口
location ^~ /api {
proxy_pass http://127.0.0.1:8125;#websocket支持配置 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_read_timeout 7200;#必须设置很长时间,否则断掉 }
c. 静态文件的配置
#静态文件
location ^~ /files{
add_header Access-Control-Allow-Origin *;
alias C:\Project\systemFiles;
autoindex off;
}d. 完整配置如下
#user nobody;
worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8085; server_name 127.0.0.1; #页面 放在 D:\DevelopmentService\nginx\vue\nginx-1.16.1\html文件夹中 location / { root html; index index.html index.htm; } #接口 location ^~ /api { proxy_pass http://127.0.0.1:8125; #websocket支持配置 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_read_timeout 7200;#必须设置很长时间,否则断掉 } #静态文件 location ^~ /files{ add_header Access-Control-Allow-Origin *; alias C:\Project\systemFiles; autoindex off; } } }
-
接口服务application.yml的名称配置
#端口和访问路径配置
server:
port: 8125
servlet:
context-path: /api -
vue项目request.js的请求配置
a. baseURL的地址 = 服务器的ip + nginx的监听访问端口
import axios from ‘axios’;const request = axios.create({ baseURL: 'http://123.123.123.123:8085',//服务器配置 - 必须改为 withCredentials: false, timeout: 120 * 1000, }); export default request;
-
vue项目打包以及部署
a. 控制台运行npm命令
npm run build
b. 复制生成的dist文件夹下的所有文件到nginx文件目录中的html文件夹下