如何解决如何在 Ionic + Vue 中使用开发服务器代理?
我想在 Ionic Vuejs 项目中使用 Ionic 的代理功能。
我已经看过有关 Ionic + Angular 和 Vue + Webpack 代理问题的问答,但找不到我的 Ionic + Vue 问题的解决方案。
目前我只是在浏览器中工作(即还没有为原生构建)。
我跟着 instructions,我的 ionic.config.json
现在看起来像这样:
{
"name": "myapp","integrations": {
"capacitor": {}
},"type": "vue","proxies": [
{
"path": "/webhp","proxyUrl": "https://www.google.com"
}
]
}
我运行 ionic serve --no-open
并浏览到 http://localhost:8100/webhp。
请求未代理,我的应用已加载,但出现路由器错误:[Vue Router warn]: No match found for location with path "/goto"
。
当我尝试在我的代码中使用 AJAX 请求访问该 URL 时:
await axios.post("/webhp");
我正在使用 Ionic CLI 6.12.2
和 Ionic Framework @ionic/vue 5.5.2
。
我做错了什么?
解决方法
我在评论中提到我使用 nginx 实现了一种解决方法,并被要求提供详细信息,因此我将其发布为答案。
在我的设置中,我让 nginx 侦听端口 8888,而 Webpack Dev Server 侦听端口 8100。
我通过端口 8888 访问网站,例如http://local.mydomain.com:8888/
。
我的 nginx 配置如下:
server {
listen 8888;
listen [::]:8888;
root /home/user/mydomain/public;
index index.php;
server_name local.mydomain.com;
location / {
proxy_pass http://local.mydomain.com:8100/;
proxy_set_header Host local.mydomain.com:8100;
}
location /x/ {
add_header Access-Control-Allow-Origin "*";
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_keep_conn on;
fastcgi_split_path_info ^(.+?\.php)(/.*)$;
if (!-f $document_root$fastcgi_script_name) {
return 404;
}
fastcgi_read_timeout 86400;
include fastcgi_params;
}
# deny access to .htaccess files,if Apache's document root
# concurs with nginx's one
#
location ~ /\.ht {
deny all;
}
access_log /var/log/nginx/local.mydomain.com.access.log;
error_log /var/log/nginx/local.mydomain.com.error.log;
}
对以 /x/
开头的路径的请求转到 index.php
。
所有其他请求都被代理到端口 8100 上的 Webpack。
剩下的配置其实和这个代理的东西没有关系;我只是包含它以提供完整的配置。
,终于启动并运行了。 我在 devServer 部分中添加了一个 vue.config.js,就像我在“普通”vue 项目中所做的那样。
ionic serve 没有从想要的代理配置开始,我的后端被代理到给定的地址。
这是我添加的 vue.config.js:
module.exports = {
runtimeCompiler: true,devServer: {
proxy: {
'/api': {
target: 'http://ionicfez:8888/',changeOrigin: true,logLevel: 'info'
}
}
},publicPath: './',outputDir: 'dist',assetsDir: 'assets'
}
这是我的 ionic.config.json
{
"name": "ionicfez","integrations": {
"capacitor": {}
},"type": "vue"
}
我的项目结构为
/ionicfez
/public
/api
/hello.php
/src
...
这是我的 .vue 文件中的一个简单测试函数,现在已被代理
init() {
this.axios
.get("public/api/hello.php")
.then(result => {
console.log(result)
})
.catch(error => console.error(error))
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。