vue插件集合22:vue 简单粗暴,复制粘贴改变跨域

1:找到config下面的index.js 在dev下面的proxyTable添加如下

'/': {
        target: 'http://www.zgddyc.com.cn/api/', //你要访问的服务器域名
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/': ''
        }
      }

修改完后

 proxyTable: {
      '/': {
        target: 'http://www.zgddyc.com.cn/api/', //你要访问的服务器域名
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/': ''
        }
      }
    },

2:axios中的baseurl要注释掉

在这里插入图片描述

3:发送成功后

在这里插入图片描述

### Vue3 部署后页面刷新 404 的原因分析 当 Vue3 单页应用(SPA, Single Page Application)被部署到服务器上时,如果用户通过浏览器直接访问某个路由地址并刷新页面,则可能会遇到 404 错误。这是因为 SPA 应用通常依赖前端框架来处理所有的路由逻辑,而服务器并不知道这些动态生成的路径[^1]。 具体来说,在 Vue Router 中配置的历史模式(`history mode`),会移除 URL 地址中的 `#` 符号,使得 URL 更加美观和友好。然而,这种情况下,服务器接收到请求时无法识别由 Vue 路由定义的路径,从而返回默认的 404 页面[^2]。 --- ### 解决方案概述 为了使 Vue3 项目在历史模式下能够正常工作,需要对 Web 服务器进行相应的配置调整,使其将所有未匹配的路径重定向回入口文件(通常是 `index.html`)。以下是几种常见的解决方案: #### Nginx 配置方法 对于基于 Nginx 的环境,可以通过修改其配置文件实现自动跳转功能。例如: ```nginx location / { try_files $uri $uri/ /index.html; } ``` 上述代码片段的作用在于告诉 Nginx 尝试查找指定资源;如果没有找到对应的静态文件或者目录,则最终加载根目录下的 `index.html` 文件。 #### Apache 配置方式 如果是使用 Apache HTTP Server 来托管网站的话,可以借助 `.htaccess` 文件完成相同的效果: ```apacheconf <IfModule mod_rewrite.c> RewriteEngine On # 如果请求的是真实存在的资源则不拦截 RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d # 否则全部转发至 index.html 处理 RewriteRule ^.*$ /index.html [L,QSA] </IfModule> ``` #### Docker 容器内部设置 (Nginx) 当把 Vue 工程打包成镜像运行于容器之中时,同样也需要确保 NGINX 正确解析来自客户端发出的各种请求链接。官方推荐做法是在构建阶段引入合适的 nginx.conf 模板[^4]: ```Dockerfile FROM node:alpine AS build-stage WORKDIR /app COPY . . RUN npm install && npm run build FROM nginx:stable-alpine COPY --from=build-stage /app/dist /usr/share/nginx/html COPY ./nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 其中自定义的 nginx.conf 可能看起来如下所示: ```nginx server { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html index.htm; location / { try_files $uri $uri/ /index.html; } } ``` #### 使用 Hash Mode 替代 History Mode 另一种简单粗暴的办法就是放弃 history 模式的优雅 url 设计思路,改回到 hash 模式上去。这样做的好处是可以完全规避掉刚才提到的那种场景下面临的技术难题——因为无论怎么折腾都只会改变 fragment identifier (#后面的部分),根本不会触发实际网络层面上的新一轮寻址行为。 不过需要注意的是这种方式虽然方便快捷但也牺牲了一定程度上的用户体验以及 SEO 效果等方面的优势[^3]. --- ### 总结 综上所述,针对 Vue3 项目部署之后因采用 history routing 导致刷新即报错的情况提供了多种可行性的应对策略。无论是调整现有的 web service 参数还是切换不同的 router strategy 均可有效缓解此类现象的发生频率及其影响范围大小等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值