vue.js에서 Nginx를 사용하여 도메인 간 문제 해결

이제 vue.js 프록시 사용 및 Nginx를 사용하여 도메인 간 문제를 해결하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

Nginx 역방향 프록시를 사용하여 도메인 간 문제 해결(vue.js는 프록시를 사용하여 도메인 간으로 인해 vue.js에 의해 트리거된 옵션 요청을 제거함)

우리 프로젝트에는 여전히 node.js가 컨테이너로 필요합니다

1. Windows 설치 Nginx (공식 홈페이지 http://nginx.org/en/download.html에서 안정 버전을 다운로드하세요.)

2. nginx에서 서버

server { 
listen 8899;// 你的端口 
server_name localhost; 
root C:/ZOBSF_F/dist;//你打包部署的文件路径 
#charset koi8-r; 
#access_log logs/host.access.log main; 
# 匹配 api 路由的反向代理到API服务 
location ^~/api { 
proxy_pass http://119.23.227.141:10001/;//你的后端IP和端口 
} 
#根据路由设置，避免出现404 
location / { 
try_files $uri $uri/ @router; 
index index.html; 
} 
location @router { 
rewrite ^.*$ /index.html last; 
} 
#error_page 404 /404.html; 
# redirect server error pages to the static page /50x.html 
# 
error_page 500 502 503 504 /50x.html; 
location = /50x.html { 
root html; 
} 
# proxy the PHP scripts to Apache listening on 127.0.0.1:80 
# 
#location ~ \.php$ { 
# proxy_pass http://127.0.0.1; 
#} 
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 
# 
#location ~ \.php$ { 
# root html; 
# fastcgi_pass 127.0.0.1:9000; 
# fastcgi_index index.php; 
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 
# include fastcgi_params; 
#} 
# deny access to .htaccess files, if Apache's document root 
# concurs with nginx's one 
# 
#location ~ /\.ht { 
# deny all; 
#} 
}

를 수정하세요. 3. uve.js로 패키징한 dist 파일은 다음과 같습니다

4. 그런 다음 프로젝트 시작 구성 파일인 server.production.js

var express = require('express');
var app = express();
var compression = require('compression');
var proxyMiddleware = require('http-proxy-middleware')
var history = require('connect-history-api-fallback');
app.use(compression());
app.use(express.static(__dirname));
app.middleware = [//使用代理api
    proxyMiddleware(['/api'], {target: 'http://192.168.11.103:10001',
    changeOrigin: true,
    pathRewrite: {
    '^/api' : '/', 
  },}),
];
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});
app.use(history());
app.use(app.middleware);

app.listen('8080', function(error) {
  console.info("==================系统正在启动中...=============================");
 if (error) {
  console.error(error)
 } else {
  console.info("==================9999系统启动成功！！！=============================")
 }
});

5을 추가합니다. 그런 다음 프로젝트 디렉터리의 명령 노드를 사용합니다. server.production.js가 Enter를 누르면 패키지에 종속성이 부족한 것으로 나타났습니다. npm install [오류 메시지의 종속성 구성 요소]를 사용하여 Express, Compression, http-proxy-middleware를 가져옵니다. 등등.

그런 다음 프로젝트를 시작하고 http://localhost:8080/xxx 주소를 방문하세요.

6. Baidu에서 vue.js용 프록시를 사용할 수 있습니다(구성 구성 파일에서 inde.js만 수정하면 됩니다). )

 proxyTable: {
     '/api': {
    target: Host.Host,//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可
    }
   }
  },

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

vue+webpack에서 비동기 구성 요소 로딩을 구현하는 방법은 무엇입니까?

vue-resource의 jsonp 도메인 간 문제에 관하여

vue

의 상위 구성 요소를 통해 하위 구성 요소 스타일을 수정하는 방법

위 내용은 vue.js에서 Nginx를 사용하여 도메인 간 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!