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 复制代码
// html中引入 方式一
<script src="./websockets.js"></script>
html 复制代码
// 方式二
<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'

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

关联文章

相关推荐
Ramos丶1 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~11 分钟前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_4116719820 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年2 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js