Vue引用public中的js文件

已于 2022-10-30 20:31:39 修改
阅读量5.6k 收藏 4
点赞数 3
分类专栏： Vue2 文章标签： 其他
于 2022-05-31 12:34:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/125063198
版权
这篇博客介绍了如何在public文件夹下创建config.js，并讲解了如何在index.html中正确引入，强调了路径前需加'/'以避免刷新时的错误。同时，文中提及在模板中使用config对象可能遇到的问题及解决办法，即在mounted阶段赋值给data属性。
摘要由CSDN通过智能技术生成

在public文件夹下创建config.js文件。

config.js中可以使用变量，也可以使用window来挂载

 测试：

注意：

  1. index.html在引入config.js时，config.js前面一定要加上/ ，否则子路由菜单刷新会报错，提示找不到js文件
  2. 如果引入config.js后，在template模板中使用config对象发现报错，那么可以在mounted中打印一下（应该可以打印出来），并赋值给data中的某个属性

疆~
关注
专栏目录
vue引用public目录下文件
X_W123的博客
05-27 1万+
vue引用public目录下文件 有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？ 其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了 关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种： 1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类
vue引用外部JS的两种种方法
10-15
主要介绍了vue引用外部JS的两种种方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中引入本地js文件（实测有效）
weixin_48447589的博客
07-19 4934
我打包之后的文件放在static下面就吧本地js文件放在public/js文件夹下。在index.html文件下引入js文件。将js文件放在public文件夹下面。
在Vue中全局引入JS文件的方法
最新发布
qq_45687669的博客
07-18 818
被引入的js文件位置需要放在public/路径下面。
vue引用public文件夹中文件
无心使然云中漫步
12-13 7134
可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。
vue项目js 公共js文件
01-02
一个vue项目的 js公共包 里面拥有很多 js封装好的方法 是一个工具类
【vue 引用public中的js文件】public文件的引用
weixin_41747256的博客
01-24 3502
一些配置项文件如果想在项目打包后进行快速的修改，可以把此文件放在public里面。
vue3+vite+js 引用public文件夹中js文件
yn21296的博客
05-30 5170
在head中引入js文件。2、页面入口index.html。
vite创建vue3项目页面引用public下js文件失败解决
夏日漱石的博客
09-13 4571
📢vite创建vue3项目页面引用public下js文件失败解决
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
Vue CLI 3默认在HTML文件中插入一个`<base href="/">`标签，这会影响到相对路径的解析。因此，通常我们需要使用绝对路径或者基于`process.env.BASE_URL`的路径来引用静态文件。 尝试使用绝对路径可能会导致问题，...
vue引入静态js文件的方法
01-19
由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。 vue-cli 2.0的作法是在static文件下创建js。vue-cli 3.0 的写法则是直接在public文件夹下创建js、 具体操作如下： 1、在public文件夹下创建config.js文件，里面文件的语法是es5，不允许使用浏览器不能兼容的es6语法。因为该文件不进行编译，es6部分语法浏览器不兼容。 2.、在html文件下，使用<scrtipt>标签进入 3、在页面直接按照原生的方法使用即可。 例如config.js定
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 引用src中的文件_Vue中引用第三方JS文件
weixin_39634997的博客
12-22 1299
使用Vue时会经常使用jQuery、bootstrap这类第三方工具库，而boostrap的渲染不仅依赖于jQuery js文件的加载，也依赖于HTML中DOM树内容的加载。但Vue中DOM树是有Vue的app.js动态生成，因此js文件的引用顺序关系boostrap是否能够渲染成功。以下没有贴所有的代码，可能有信息缺失引起歧义，可以发送邮件到hugh@inner-peace.cn咨询和探讨。遇到...
vue.js 引入外部的js文件
water_Popcorn的博客
08-06 623
js源码： importVue from'vue'; letv = newVue(); function方法一名称(message) { v.$alert(message, "提示", { confirmButtonText: '确定' }); } function方法二名称(){ history.go(0); } showPage(){ Al...
Vue 获取 public图片
weixin_45849417的博客
09-21 1593
vue 获取public图片的路径
vue项目使用公共js方法@令狐张豪
LingHuzh的博客
03-11 2284
我们在做项目中会用到很多js方法，然后有些方法是通用的我们需要进行封装使用 在src下创建utils目录并创建utils.js文件 utils.js文件 export default { //判断手机机型 versions() { var u = navigator.userAgent; return { trident: u.indexOf('Trident') > -1, presto: u.
vue全局js文件
drunk2的博客
05-04 214
vue配置全局js文件引用 在public文件夹下创建js文件(public不会被打包，打包后可以改js全局文件) 在入口文件html中引入 项目中使用
vue3.2 引用public下的js文件
09-07
在Vue 3.2中，引用public下的js文件的方法有两种。 第一种方法是直接在index.html文件中使用`<script>`标签引入js文件。首先确保public文件夹下有需要引入的js文件，然后在index.html文件中的`<head>`标签内添加如下代码： ``` <head> ... <script src="<文件路径/文件名.js>"></script> ... </head> ``` 其中`<文件路径/文件名.js>`是指需要引入的js文件的路径和文件名。 第二种方法是使用import语句引入js文件。首先在src文件夹下创建一个新的js文件，例如`public.js`，然后在该文件中使用import语句引入需要使用的js文件。示例如下： ``` // public.js import '<文件路径/文件名.js>'; ``` 其中`<文件路径/文件名.js>`是指需要引入的js文件的路径和文件名。 然后，在需要使用该js文件的组件中使用import语句引入`public.js`文件。示例如下： ``` // HelloWorld.vue <script> import '@/public.js'; export default { ... } </script> ``` 在上述代码中，`@/public.js`表示public.js文件的路径相对于当前组件的路径。 这样就可以在Vue 3.2中成功引用public下的js文件了。无论是使用第一种方法还是第二种方法，都能实现引入js文件并在Vue组件中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值