vue-cli3 使用外部js文件

最新推荐文章于 2024-06-24 19:10:01 发布
最新推荐文章于 2024-06-24 19:10:01 发布
阅读量891 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43640375/article/details/111406378
版权
本文档详细介绍了在Vue CLI3项目中如何引入并使用外部JavaScript文件，如base.js。首先，在src目录下创建static文件夹，然后将base.js放入其中。接着，在main.js中导入base.js文件，最后在Vue应用中即可正常使用。
摘要由CSDN通过智能技术生成

vue-cli3 使用外部js文件

Demo

使用外部base.js 文件

步骤

  • 在src 目录下创建文件夹 static, 放入base.js 文件

  • base.js

    export default {
     
    get_base_url(){
     
        // return "http://127.0.0.1:8000"
        return "https://www.xxxx.xx"
    }
}

  • main.js中引入

    import base_js
最低0.47元/天 解锁文章
xingba9363
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue父子组件数据、方法
qq_43531886的博客
09-24 185
父组件 <template> <div> <navigationBar :listdata="list" :toIndex="Index"></navigationBar> </div> </template> 父组件要传递的 data() { return { list: [ { name: "导航一", url: "/login" }, { name: "
vue-cli3使用 DllPlugin 实现预编译提升构建速度
10-17
5. 最后，在 Vue CLI 3 的配置文件 `vue.config.js` 中，告诉 Webpack 哪些模块已经被预编译，这样它们就不会在常规的构建过程中被处理： ```javascript const webpack = require('webpack'); module.exports = ...
vue3中的各种引入及其使用
七月❤的博客
02-01 4171
【代码】vue3中的各种引入及其使用。
Vue 中如何引入第三方 JS 库_vue3 第三方js
最新发布
2401_84435192的博客
06-24 901
*资料过多，篇幅有限**对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
vue组件内引入外部js, 外部js调用组件内的方法
热门推荐
WuKongHeBaJie的博客
07-21 2万+
文章目录简介1. 新建/导入js文件到指定位置2. 编写test.js文件2.1 编写js文件中的方法2.2 module.exports 导出方法3. vue 组件中使用3.1 引入test.js文件3.2 在methods中定义方法调用4. 外部js调用vue组件中的方法4.1 方式一（传参）4.1.1 vue组件调用方法时传this参数4.1.2 外部js方法中接受参数4.2 方式二4.2.1 方法赋值给window4.2.2 window调用5. 外部主js文件调用其它js中的方法5.1 引入a
Vue 组件中如何引入外部的js文件 的10种方法
一步一个脚印，踏实努力，向着目标前进
08-30 2万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
在vue组件中引入外部js
qq_42894622的博客
05-17 3491
方法1： // 先定义这么个组件 export default { components: { 'remote-js': { render(createElement) { return createElement('script', { attrs: { type: 'text/javascript', src: this.src }}); }, props: {...
vue文件中如何import引入js文件，并且调用js文件中的方法
qq_37928724的博客
07-06 1万+
vue中引入js文件可以使用 / ./ ../ 这三种方式引入外部js文件。 下面讲解一下这三种的用法。 第一种 / ：个人理解就是返回到项目根目录，如下图所示。返回到了整个项目的最根部。引入文件就比较繁琐。不过也是可以实现的 第二种./：这是导入同级目录下的文件，如下图所示 第三种 ../ ：这是导入上一级目录里的文件，如下图 而我此次需要引入文件是上一级的上一级里面的文件，所有只需要重复两次就行 ../../ 这样就可以找到想要的文件了。如下图 ...
Vue组件中如何引入外部的js文件
lq099526的专栏
05-11 1250
Vue组件中引入外部的js文件的6种方式
vue3中使用 js-base 加解密
With__Hope的博客
09-30 397
【代码】vue3中使用 js-base 加解密。
安装vue-cli的简易过程
12-11
Vue CLI，全称为Vue.js Command Line Interface，是一个官方提供的强大脚手架工具，用于快速搭建Vue.js项目。Vue CLI简化了Vue项目的初始化和配置过程，使得开发者能够更专注于编写核心业务逻辑，而不是处理构建配置...
webpack+vue-cli项目中引入外部非模块格式js的方法
10-17
今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-web-component：使用Vue CLI 3构建的示例Web组件
02-06
该小部件是使用并使用编译成一个Web组件。 最终的构建文件位于dist文件夹下。 您可以从localhost提供index.html来查看运行中的小部件。 构建设置 # install dependencies $ yarn # serve with hot reload at ...
vue-cli3单页构建大型项目方案
11-20
Vue CLI 3 是 Vue.js 的官方命令行工具，它提供了快速搭建 Vue 项目的基础结构，大大简化了前端开发流程。本篇文章将详细讲解如何使用 Vue CLI 3 构建大型单页应用（SPA）。 首先，创建项目时，通过在目标文件夹内...
vue-cli3项目通过vue如何引入第三方js包完成登陆功能
i_am_a_div的博客
08-21 1734
注意：本次登陆，前后端分离；前端通过引入第三方的js包，调用js包里的初始化方法和提交方法完成登陆； 流程1.引入第三方包 1.1在index.html文件下引入 流程2.完成初始化 问题2.1因为初始化的时候，必须传递后端分配的state，用作验证。 当时做了几种传递state的方式，方式1：前端到了login页面后先请求借口获取state的值，然后传递给初始化的state，发现行不通（确实初始化赋值上去了分配的state，但是登陆失败，后端说不支持）； 流程3.拦截跳转： 最后采取方式2：前端在
vue引用外部js
lxw2017的博客
09-27 1107
工作中需要使用vue框架，有的时候npm能下载的js并不够于平时的开发，经常会有需要引用第三方js的时候出现，自己查了很多资料都没有一个很好的处理办法，偶然发现了一个一次引用能同时调用多个function的方法，仅供参考。 查阅了一些资料发现大多数引用都是通过在对应.vue文件内的<script></script>标签里添加 import {test} fr...
vue cli3中，在vue.config.js文件中怎么引入其他js文件
weixin_45646663的博客
11-17 8615
1，在要被引入的文件中 module.exports = { interfaceIP: "http://172.16.170.135:900/PEapi" } 2，在vue.config.js中， const interfaceIP = require('./public/configip'); console.log(interfaceIP) console.log(interfaceIP.interfaceIP) module.exports = { productionSourceMap
vue3中 封装JS 限制字数的方法（export、export default）
wsy296717574的博客
11-09 1728
在公共文件夹下，封装JS的方法，用export或者export default输出，然后在需要引入的组件中用import引入。 // 可以在函数外面加一个log，判断方法是否引入成功 components文件夹下的公共js方法文件： 如果不加export或者export default输出的话，组件中引入会报错说找不到方法 // export default方法输出 export default // 用js限制字数，超出部分以省略号...显示 function LimitNumber(tx
vue3.0 动态调用export进来的两种方法
小米粒的博客
12-16 3653
1.在index文件中定义方法体 const FORM = (instance,data)=>{ const urlAxios = instance.axios; const $this = instance.proxy; urlAxios.post({ url: "jd", data: { sid: instance.sessionId, cmd: '_COPY_PAGE_JSON',
vue-cli既不是外部命令 也不是可运行程序
09-01
您好！对于您提到的问题，可能是因为您在命令行中输入了"vue-cli"，但系统无法找到相应的外部命令或可执行程序。这通常是因为您没有全局安装 Vue CLI，或者环境变量没有正确配置。 要解决这个问题，您可以按照以下步骤操作： 1. 确保已经安装了 Node.js。您可以在命令行中运行"node -v"来检查是否已安装。 2. 使用 npm（Node 包管理器）全局安装 Vue CLI。在命令行中运行以下命令： ``` npm install -g @vue/cli ``` 3. 安装完成后，您可以在命令行中使用"vue --version"来确认 Vue CLI 是否已正确安装。 如果您已经按照上述步骤安装了 Vue CLI，但仍然无法运行 "vue-cli" 命令，您可以尝试以下解决方案： 1. 确认环境变量已正确配置。请检查系统的 PATH 环境变量中是否包含了 Vue CLI 安装路径。 2. 如果您使用的是 Windows 操作系统，可能需要重新启动命令提示符或者重新登录以使环境变量生效。 通过以上步骤，您应该能够成功运行 "vue-cli" 命令了。希望能对您有所帮助！如果您还有其他问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值