vue2调用外部文件参数

最新推荐文章于 2024-05-03 08:00:00 发布

AM648

最新推荐文章于 2024-05-03 08:00:00 发布

阅读量162

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_56380151/article/details/133138221

版权

一、在public文件下创建config.js文件，内容如下

window.server = {
    // 后端接口地址配置
    SERVER_API:"http://192.168.239.131:8091",
}

二、在public文件下的index.html文件中引入当前js文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 调用外部config -->
    <script type="text/JavaScript" src="./static/config.js"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

三、在需要访问外部文件参数的地方读取需

let conf_api = window.server.SERVER_API; // 获取config中的值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AM648

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2调用外部文件参数

二、在public文件下的index.html文件中引入当前js文件。一、在public文件下创建config.js文件，内容如下。三、在需要访问外部文件参数的地方读取需。
复制链接

扫一扫

vue2+element+导入Excel表格并携带参数

小香菜子的博客

09-13

1489

file-list="导入的文件列表"action="写后端导入接口地址":on-change="方法名称"（2）data中定义数组。

Vue 组件中如何引入外部的js文件的10种方法

一步一个脚印，踏实努力，向着目标前进

08-30

2万+

原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。

参与评论您还未登录，请先登录后发表或查看评论

【前端】在Vue页面中引入其它vue页面数据传输相互调用方法等

我是Superman丶的博客

09-08

6221

那么我们只需要在home.vue想要的地方添加比如我们需要在 home.vue 中引用 headView.Vue。

区分Vue2和Vue3的配置读取（附Demo）

最新发布

码农研究僧的博客

05-03

610

区分Vue2和Vue3的读取配置差异

Vue2 中外部文件的引用方式的变化

weixin_67665876的博客

10-24

214

Vue2官方文档学习记录

vue组件内部引入外部js文件的方法

11-21

在Vue.js应用中，有时我们需要在特定的组件内部引入外部JavaScript文件，而不是全局引入。这样做的好处是可以避免不必要的资源加载，提高应用性能。本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作...

vue动态加载外部依赖js代码实现

11-19

本文将详细介绍如何通过创建一个Vue组件来实现动态加载外部JS文件的功能，并探讨其原理与应用场景。 #### 关键知识点 1. **Vue组件化思想** - Vue.js推崇组件化开发模式，即通过定义多个独立的、可复用的组件来...

在vue中读取本地Json文件的方法

10-18

`$http.get`方法接收URL作为参数，该URL相对于当前运行Vue应用的HTML文件。当请求成功时，`then`回调会被调用，其中`res`对象包含了响应信息，我们可以通过`res.body`获取到JSON解析后的数据。如果请求失败，`catch`...

vue中调用百度地图实现搜索等功能

01-08

总之，要在Vue中调用百度地图实现搜索等功能，需要理解Vue组件的生命周期，掌握百度地图API的基本用法，以及如何在Vue中与用户交互。通过实践和查阅官方文档，可以逐步完善地图功能，提供更丰富的用户体验。

通过浏览器调用本地Exe文件

01-30

这个场景下，标题“通过浏览器调用本地Exe文件”涉及的技术点主要集中在Web与桌面应用的交互，以及如何传递参数。下面将详细讲解这些知识点。首先，我们要理解浏览器本身是基于Web的安全模型运行的，它通常不允许...

Vue组件的三种调用方式

weixin_33730836的博客

01-14

2994

最近在写fj-service-system的时候，遇到了一些问题。那就是我有些组件，比如Dialog、Message这样的组件，是引入三方组件库，比如element-ui这样的，还是自己实现一个？虽然它们有按需引入的功能，但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。通常我们看Vue的一些文章的时候，我们能看到的通常是讲Vue单文件组件化开发页面的。单一组件开发的文...

[vue]引入外部文件

前端

04-08

3791

[vue]引入外部文件这里的vue中引入外部文件，不是指在src的vue文件中引入独立的项目中的js文件，而是指非该项目中的文件，或者非打包范围（src目录下）的其它文件，因为需要引用外部文件中的变量，因为该变量是变化的，不能在该项目中确定该值，该文件根据条件最终被放置到打包后的dist文件夹中，因此不是项目中指定目录下的文件此处外部文件是指文件打包后，被后来放置到打包的dist文件夹中的js文件，该文件之前不存在于项目中，或者不在打包范围之内例如：dist/env.js 直接引用文件可以在in

vue读取外部配置文件

fackyoufack的博客

10-25

4747

开始： 1.首先：在public中创建static文件夹，在static文件夹中创建config.js文件 2.创建完成在public中的index.html引入 <script src="./static/config.js"></script> 3.在config.js写入 window.server = { // 后端配置 SERVER_API:"http://..." } 4.在页面中使用 //获取外部链接 let confapi = window.ser

在外部js文件中直接调用vue文件中自定义的方法

枫陵的博客

11-17

3566

【代码】在外部js文件中直接调用vue文件中自定义的方法。

从vue新建页面过程看vue项目文件调用关系

weixin_43236610的博客

09-28

1万+

最近开始研究web前端vue框架，尝试将网上纷乱的资料结合具体操作进行整理，以此加深印象。 1. vue项目构建过程笔者使用JetBrain公司产品webstorm新建vue项目第一步：官网下载安装webstorm 第二步：在左侧导航栏中选择Vue.js，此时右侧需进行配置：修改文件名（初始为untitled）配置node.js 简介：node是js的服务执行环境，前端常常借助 n...

Vue中的.vue文件的使用

程序员徐小白的博客

02-13

8974

需要安装vue-loader npm i vue-loader vue-template-complier -D 然后在配置文件中新增匹配规则 {test:/\.vue$/,use:'vue-loader'} 1. 定义.vue文件 <template>  </template> <script> //这里定义...

vue引用js文件的多种方式(推荐)

热门推荐

weixin_39885843的博客

02-12

2万+

1、vue-cli webpack全局引入jquery (1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。) (2)在webpack.base.conf.js里加入 var webpack = require("webpack") (3)在module.expo...

VUE单文件组件之间调用

南风不竞的专栏

09-05

3540

现有2个vue单文件组件，Vif.vue和Vbind.vue，要在Vif.vue中调用Vbind.vue。 Vif.vue代码如下： <template> <divid="app-3"> <pv-if="seen">现在你看到我了</p> <vbind></vbind> </div> &l...

Vue.js组件之间的调用

web_xiaolei的博客

04-01

1万+

index.html：运行完index.html之后自动寻找运行main.js文件 main.js： import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false new Vue({ el: '#app',

vue 调用外部js写的函数

07-14

要调用外部JS中的函数，你可以使用Vue的生命周期钩子函数或者在Vue组件中直接引入外部JS文件。方法一：在Vue的生命周期钩子函数中调用外部函数 1. 将外部JS文件引入到Vue组件的HTML模板中，例如： ```html <script src="path/to/external-js-file.js"></script> ``` 2. 在Vue组件的created或mounted生命周期钩子函数中调用外部函数，例如： ```javascript created() { // 调用外部函数 externalFunction(); }, ``` 方法二：在Vue组件中直接引入外部JS文件 1. 在Vue组件的script标签中使用import语句引入外部JS文件，例如： ```javascript import externalFunction from '@/path/to/external-js-file.js'; ``` 这里的`@`符号是Vue CLI中的别名，表示项目根目录。 2. 在需要使用外部函数的地方调用它，例如： ```javascript methods: { callExternalFunction() { // 调用外部函数 externalFunction(); } } ``` 注意：这种方法需要使用模块化的方式来管理外部JS文件。无论你选择哪种方法，确保外部JS文件已经正确加载，并且函数名和参数正确匹配。这样就可以在Vue组件中成功调用外部JS文件中定义的函数了。