vue中html引入使用<%= BASE_URL %>变量

在这里插入图片描述

首先使用src相对路径引入

注意:

js 文件放在public文件下 不要放在assets静态资源文件下
否则 可能会报错

GET http://192.168.0.113:8080/src/assets/js/websockets.js net::ERR_ABORTED 500 (Internal Server Error)

正确使用如下:eg

// html中引入 方式一
<script src="./websockets.js"></script>
// 方式二
<script src="<%= BASE_URL %>websockets.js"></script>

<%=%>是ejs模板语法
ejs模板语法是为了能够在html文件中使用js变量

Vue CLI 3.3 之前的版本,BASE_URL 对应的是 vue.config.js中的 baseURl 字段
vue CLI 3.3 之后(包括3.3)的版本,对应的是publicPath

publicPath 中的这个 / 代表的是打包之后静态资源的路径,也就是说代表的是打包后 dist文件夹的路径

想修改 BASE_URL,
Vue CLI 3.3 之前的版本,配置:baseURl: ‘/static’
Vue CLI 3.3 之后(包括3.3)的版本,配置:publicPath: ‘/static’

// 还可以通过环境判断
module.exports = {publicPath: process.env.NODE_ENV === 'production'? '/static/': '/'
}

关联文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/93551.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

百亿级访问量,如何做缓存架构设计

说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、网易、有赞、希音、百度、网易、滴滴的面试资格&#xff0c;遇到一几个很重要的面试题&#xff1a;&#xff1a; 分布式缓存系统&#xff0c;如何架构&#xff1f;百亿级访…

达梦8 在CentOS 系统下静默安装

确认系统参数 [rootlocalhost ~]# ulimit -a core file size (blocks, -c) unlimited data seg size (kbytes, -d) unlimited【1048576(即 1GB)以上或 unlimited】 scheduling priority (-e) 0 file size (blocks, -f) unlimite…

微软用 18 万行 Rust 重写了 Windows 内核

微软正在使用 Rust 编程语言重写其核心 Windows 库。 5 月 11 日——Azure 首席技术官 Mark Russinovich 表示&#xff0c;最新的 Windows 11 Insider Preview 版本是第一个包含内存安全编程语言 Rust 的版本。 “如果你参加了 Win11 Insider 环&#xff0c;你将在 Windows 内…

Linux 调试技术 Kprobe

目录 用途&#xff1a;一、技术背景1.1 kprobes的特点与使用限制1.2 kprobe原理 二、 基于kprobe探测模块的探测方式2.1、struct kprobe结构体2.2 kprobe API函数2.3 示例代码参考资料&#xff1a; 用途&#xff1a; 判断内核函数是否被调用&#xff0c;获取调用上下文、入参以…

【css】z-index与层叠上下文

z-index属性用来设置元素的堆叠顺序&#xff0c;使用z-index有一个大的前提&#xff1a;z-index所作用元素的样式列表中必须有position属性并且属性值为absolute、relative或fixed中的一个&#xff0c;否则z-index无效。 层叠上下文 MDN讲解 我们给元素设置的z-index都是有一…

E5071C是德科技网络分析仪

描述 E5071C网络分析仪提供同类产品中最高的RF性能和最快的速度&#xff0c;具有宽频率范围和多功能。E5071C是制造和R&D工程师评估频率范围高达20 GHz的RF元件和电路的理想解决方案。特点: 宽动态范围:测试端口的动态范围> 123 dB(典型值)快速测量速度:41毫秒全2端口…

【原创】H3C三层交换机的路由模式

网络拓扑图 将三层交换机当路由器使用 交换机配置 <H3C>dis stp briefMST ID Port Role STP State Protection0 GigabitEthernet1/0/1 DESI LEARNING NONE0 GigabitEthernet1/0/2 …

国标视频融合云平台EasyCVR视频汇聚平台关于远程控制的详细介绍

EasyCVR国标视频融合云平台是一个能在复杂网络环境下统一汇聚、整合和集中管理各类分散视频资源的平台。该平台提供了多种视频能力和服务&#xff0c;包括视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、集群、电子地图、H.265视频自动转码和智能分析等…

Solidity 小白教程:6. 引用类型, array, struct

Solidity 小白教程&#xff1a;6. 引用类型, array, struct 这一讲&#xff0c;我们将介绍solidity中的两个重要变量类型&#xff1a;数组&#xff08;array&#xff09;和结构体&#xff08;struct&#xff09;。 数组 array 数组&#xff08;Array&#xff09;是solidity常…

java+springboot+mysql校园跑腿管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的校园跑腿管理系统&#xff0c;系统包含超级管理员&#xff0c;系统管理员、用户角色&#xff0c;功能如下&#xff1a; 超级管理员&#xff1a;管理员管理&#xff1b;用户管理&#xff08;充值&#xff09;&#xff1b;任…

vscode调教配置:快捷修复和格式化代码

配置vscode快捷键&#xff0c;让你像使用idea一样使用vscode&#xff0c;我们最常用的两个功能就是格式化代码和快捷修复&#xff0c;所以这里修改一下快捷修复和格式化代码的快捷键。 在设置中&#xff0c;找到快捷键配置&#xff1a; 然后搜索&#xff1a;快捷修复 在快捷键…

leetcode 503. 下一个更大元素 II

2023.8.28 本题类似于下一个更大元素I &#xff0c;区别就是数组变成循环的了&#xff0c;可以将nums数组先double一下&#xff0c;如&#xff1a;{1&#xff0c;2&#xff0c;1}变成{1&#xff0c;2&#xff0c;1&#xff0c;1&#xff0c;2&#xff0c;1}&#xff0c;再用单调…