首页 > 其他分享 >vue打包部署遇到的问题

vue打包部署遇到的问题

时间:2023-10-26 11:56:34浏览次数:31  
标签:Control vue 跨域 部署 Access nginx Allow 打包

网站上线中遇到的问题(跨域,404,空白页解决方案)

因为本人是后端开发工程师,对前端开发不了解,踩了很多坑,所以将踩过的坑分享出来,以供参考

网站地址:这里

这段时间将项目部署到服务器中引发了几个问题

第一个问题:跨域

一般跨域是由后端来解决的,但是由于项目中加入了追踪请求的日志,频繁options会使后台服务多一些无用的请求日志,所以使用nginx来做跨域

image-20231012165033063

在对应的后端apilocation块儿中增加Access-Control-Allow-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-CredentialsAccess-Control-Allow-Headers,然后判断请求方法为options则返回204状态码

第二个问题:404

将vue项目打包部署到服务器后访问网站,当点击某个页面,然后刷新此网页时会有404错误(图1和图2),解决方法还是修改nginx配置文件

图一:

image-20231012170354648

图二:

image-20231012170500340

我的nginx配置为:

image-20231012170000040

关键点是try_files $uri $uri/ /index.html;,这段的意思是nginx服务器会先尝试在本地查找你请求的uri地址,若请求不到则交给vue的路由处理

第三个问题:空白页

不知道因为什么在vue.config.js的配置中加入了

image-20231012171118425

在生产环境中打包后出现了这个问题:Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.f35dccd9.js:1:1)

image-20231012171439417

通过https://blog.csdn.net/HeXinT/article/details/125082562找到了解决方案,将publicPath注释掉就可以解决掉这个问题了

标签:Control,vue,跨域,部署,Access,nginx,Allow,打包
From: https://www.cnblogs.com/Free-A/p/17789081.html

相关文章

  • 开发实例:后端Java和前端vue实现文件上传和下载功能
    首先,在Java的后端代码中,我们可以使用Spring框架来实现文件上传和下载功能。以下是一个简单的示例:文件上传首先,我们需要在html页面上创建一个表单,其中包含一个file类型的输入字段:<formaction="/upload"method="POST"enctype="multipart/form-data"><inputtype=......
  • Kafka 简介、集群架构、安装部署、基本命令
    一、kafka是什么?在实时计算中,Kafka主要是用来缓存数据,storm可以通过消费kafka中的数据进行实时计算。一套开源的分布式的消息队列系统,由scala写成,支持javaAPI。Kafka读消息采用topic进行归类。二、kafka中有哪两种角色?发送消息:Producer(生产者)接收消息:Consumer(消费者)三......
  • vue3 vite 根据目录生成路由
    vite勾选vue-router搭建好项目后,routes部分示例代码为routes:[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',//routelevelcode-splitting......
  • 使用vite自动生成vue路由
    全新的路由组织方式以往编写路由都需要手动编写router.js代码,其实很多代码是重复的新的方案根据文件夹目录结构自动生成文件夹下的index.vue->/初始化项目构建npminitvue@latest运行npmrundev项目结构一个文件夹对应一个路由page.js用来填写配置信息exportdefault{ti......
  • docker-compose部署SASL认证的kafka
    前言测试服务器:10.255.60.149一.编写docker-compose文件1.docker-compose.ymlversion:'3.8'services:zookeeper:image:wurstmeister/zookeepervolumes:-/data/zookeeper/data:/data-/home/docker-compose/kafka/config:/opt/zookeeper-......
  • helm部署kafka鉴权以及ACL
    官方文档https://github.com/bitnami/charts/tree/main/bitnami/kafkahttps://blog.csdn.net/u011618288/article/details/129105777(包含zookeeper与broker认证、鉴权流程)一.修改values.yaml文件按通用部署方案拉下来kafka安装包,修改values.yaml文件,开启scram鉴权,ACL以......
  • centos7直接部署添加认证的kafka
    前言测试服务器:10.255.60.149一.安装jdk官网下载jdk1.8版本以上的https://www.oracle.com/java/technologies/downloads/测试系统版本为centos7,选择了最后一个下载后,使用rpm-ivh即可安装二.安装zookeeper和kafka软件版本:kafka_2.12-2.4.0(带zookeeper)下载链接:http://a......
  • vue - 实现文件的上传-字节流下载详细过程
    前言这个需求一般是在有合同的地方用,首先不止一个地方用我们应该把他封装成一个简易的全局组件,上传的时候封装成全局组件,传2个值,一个合同id,一个开关,下载的时候调用接口获取文档流下载注意看下面的文件上传下载-细节有详细的过程和遇到的问题和解决方案效果图接口配置importreq......
  • vue和element ui 滑块组件 重置验证滑块父组件ref调用子组件函数,子组件调用自己dom标
    css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。方式一:利用css3滤镜filter中的drop-shadow代码如下:<style>.icon{display:inline-block;width:180px;height:180px;bac......
  • Vue绑定Style和Class写法
    vue2写法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>......