解决 vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 "./" 的问题

2023-10-27

问题篇

最近使用frp代理开发微信vue应用,frp代理不直接暴露根目录,因为我的根目录已经被我的博客占用了,所以就使用nginx又代理了一层,访问方式从越来的
wechat.youngboy.vip 变成 wechat.youngboy.vip/proxy ,在游览器中 / 代表域名的根目录,./代表当前路径
比如:

域名
wechat.youngboy.vip

目录结构
--+ static
-----xx.css
-- app.js
-- index.html

反向代理路径为 /proxy

游览器访问路径为 
wechat.youngboy.vip/proxy/index.html 200

html中的src标签
<script src = "/app.js"/>  游览器会发送 wechat.youngboy.vip/app.js 404
<script src = "./app.js">  游览器访问会发送 wechat.youngboy.vip/proxy/app.js 200

线上发布的时候一般都会使用nginx反向代理,所以使用./是最靠谱的,但是vue-cli dev 中的 assetsPublicPath不能配置成"./",而build中的却可以配置,并可以正常访问,虽然不影响发布但是影响开发效率。

解决篇

翻阅了一下午的webpack文档发现是因为webpack.dev.conf.js 中的publicPath的值配错了,原来配置的是config.dev.assetsPublicPath,只要把publicPath的值改成 "/" 就行了

在这里插入图片描述

原因分析

publicPath 总是以斜杠(/)开头和结尾,所以publicPath不能配置为./ 所以访问时会报错

devServer.publicPath 官方解释

数据类型 string
此路径下的打包文件可在浏览器中访问。

假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath"/",所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。

可以修改 publicPath,将 bundle 放在一个目录:

publicPath: "/assets/"

你的包现在可以通过 http://localhost:8080/assets/bundle.js 访问。

确保 publicPath 总是以斜杠(/)开头和结尾。
也可以使用一个完整的 URL。这是模块热替换所必需的。 这里是重点

publicPath: “http://localhost:8080/assets/
bundle 可以通过 http://localhost:8080/assets/bundle.js 访问。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决 vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 "./" 的问题 的相关文章

随机推荐

  • Grafana图表配置快速入门

    1 Grafana图表配置快速入门 前面我们使用 Prometheus Grafana 实现了一个简单的 CPU 使用率变化图 但是这个图还有许多缺陷 例如 左边栏的数值太小了无法调整 下面的图标信息无法定制化等等 其实 Grafana 的
  • ifconfig出现command not found解决办法

    问题 说下我linux配置情况 不一样的可以选择借鉴我的办法 在虚拟机中以最小化方式安装centos7 ifconfig命令无效 而且在sbin目录中没有ifconfig文件 原因 这是因为centos7已经不适用ifconfig命令了 已
  • vue监听一个对象的多个属性

    可以分开监听 但是不能深度监听 不能监听对象 只能 监听属性 如果监听对象 直接在handler外层加上对象名就可以了 下面加deep和immediate都为true watch lineType t console log t rowTy
  • RT-Thread记录(十四、I/O 设备模型之ADC设备)

    RT Thread ADC 设备学习使用 目录 前言 一 ADC 采样基础 1 1 ADC 通道 1 2 ADC 分辨率 1 3 ADC 采样计算 二 ADC 设备操作函数 2 1 查找 ADC 设备 2 2 使能 关闭 ADC 通道 2
  • 前端工程化:express服务端开发

    目录 1 express基本使用 1 安装依赖 2 创建服务 3 启动服务 2 express中间件和异常 1 中间件分3种 2 异常捕获有3种 3 https服务和静态服务 1 https服务 2 静态服务 1 express基本使用 1
  • 揭秘-只有13台DNS根域名服务器原因

    引言 什么是DNS DNS服务 将主机名映射成IP地址 一个主机可以有一个规范主机名 多个别名 www sina com就是个别名 邮件服务器也有别名 目的 负载平衡 通过IP分流 DNS的架构 前面我们说DNS是将主机名对应到IP 那么这
  • ConstraintLayout使用总结

    0dp的使用 app layout constrainedWidth true android layout width wrap content android layout width 0dp 效果是一样的 可以自动充满剩余空间 例子一
  • 【ZT】怎么查PC的CPU序列号?(wmic CPU get ProcessorID。WIN7可用)

    https zhidao baidu com question 38740362 html 怎么查CPU序列号 怎么查CPU序列号 我的是AMD Athlon4000 2的处理器 处理器上面写的是 AD04000IA5DD CAARG 07
  • CSS3新增了哪些新特性?

    一 是什么 css 即层叠样式表 Cascading Style Sheets 的简称 是一种标记语言 由浏览器解释执行用来使页面变得更美观 css3是css的最新标准 是向后兼容的 CSS1 2的特性在CSS3 里都是可以使用的 而CSS
  • C语言进阶,第4节-自定义类型详解(结构体+枚举+联合)

    一 结构体 1 结构的声明 描述一个学生 struct Stu 结构体标签 成员变量 char name 20 int age char sex 5 char id 20 x x 为 struct Stu 类型的变量 匿名结构体类型 str
  • LLama 2部署教程+私有模型分发

    近日 Meta发布了LLama的最新版本 LLama2 尽管其对中文的处理能力尚有待提升 但其整体表现无疑是令人瞩目的 在发布当天 我便迫切地将其下载下来进行试用 发现相比之前的版本 LLama2在多个方面都实现了显著的进步 特别是在编程能
  • stable diffusion实践操作-文生图

    本文专门开一节写文生图相关的内容 在看之前 可以同步关注 stable diffusion实践操作 正文 1 liblib SD1 5底模 lora baihuaniang 1 0 详细信息 底模 SD 1 5 Lora baihuania
  • 【翻译】进程间通信是什么?

    从单体架构到微服务的转变需要构成应用程序的不同服务之间的通信 服务实例通常是需要以某种方式相互通信的进程 这就是进程间通信 IPC 有时称为服务间通信 ISC 的作用 人们 往往想到的IPC机制是RESTful APIs 因为这仍然是使用最
  • 在java里怎样将 List按指定长度分割

    需求背景 在实现业务功能时 难免会遇到大数据量处理的情况 比如 业务需要处理100000个订单的信息 需要调用外部接口 但接口请求入参限制了参数IDS个数不能超1000 那么就需要将 100000个订单拆分成 100组数据 分组处理 找了很
  • U-Boot 移植

    目录 NXP官方开发板uboot编译测试 查找NXP官方的开发板默认配置文件 defconfig 配置编译NXP官方开发板对应的uboot 烧写验证与驱动测试 定位缺少的驱动 在NXP官方U Boot 中添加自己的开发板 添加开发板默认配置
  • 数据库连接 ORA-12170 TNS connect timeout occurred

    数据库连接出现 ORA 12170 TNS connect timeout occurred这个错误 解决思路 首先连接内网数据库 要排除是不是网络的问题 如果不是网络的问题 再去检查监听是否出现配置错误或其他错误 跟踪路由会有连接超时的现
  • Java中new data()插入数据库---时间相差13h(系统时间是对的,数据库时间也是对的)

    参考了该篇博客 https blog csdn net wo18237095579 article details 90288735 方法 数据库JDBC链接配置加上 serverTimezone GMT 2B8 亲测有效 排查逻辑 1 先
  • java.lang.NumberFormatException 错误及解决办法

    总结几个java lang NumberFormatException 错误及解决办法方法 转载https blog csdn net xiaodongvtion article details 8835668 转载https blog c
  • 【瑞吉外卖day01】

    1 软件开发流程 需求分析 设计 编码 测试 上线运维 软件开发角色分工 软件环境 开发环境 测试环境 生产环境 2 项目技术选型与功能架构 3 数据库环境搭建 Navicat中新建数据库 运行sql 一共建好11张表 4 maven环境搭
  • 解决 vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 "./" 的问题

    问题篇 最近使用frp代理开发微信vue应用 frp代理不直接暴露根目录 因为我的根目录已经被我的博客占用了 所以就使用nginx又代理了一层 访问方式从越来的 wechat youngboy vip 变成 wechat youngboy