开发环境下我们需要使用nginx做代理,例如接口为http://ip/api,我们则可以将api接口代理出去。
所用技术:docker,nginx。
讲一下逻辑:
1.vue项目打包,打包到dist文件夹下。
2.nginx做容器,并且代理/api接口。(其他接口就继续加location)
3.使用docker来启动nginx。
下面是nginx的配置:(保存为 web.conf 文件)
server {
listen 80 default_server;
listen [::]:80 default_server;
client_max_body_size 10M;
root /web;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
root /web;
index index.html index.htm;
}
location /api {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://ip/api;
}
}
我这里有一个写好的docker文件,可以根据自己所使用进行修改。
version: '2'
services:
web:
image: nginx:latest
volumes:
- ./web.conf:/etc/nginx/conf.d/mysite.template
- ./dist:/web
ports:
- 80:80
command: /bin/bash -c "envsubst < /etc/nginx/conf.d/mysite.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"
打开网站http://localhost/,即可,现在可以测试还存在有跨域请求。