vue3引入js文件(vue中怎么引入js文件)

网友投稿 3265 2023-12-31 10:31:09

vue引用public中的js文件

在开发环境中，我在public下创建了config.js文件，并且用export default方法进行导出在页面使用的地方使用import config from XXX进入引入。开发过程中，没有出问题，但是在打包发布以后，发现修改config文件并不生效

首先申明我是window系统下Vue-cli3版本，脚手架整体基于vue2内核正常js文件如果有使用export向外暴露对象，将js放在src/assets都是可以通过import直接引入。

这个问题可能是因为在Vue应用中引用的外部JS文件未能在页面加载时正确加载。这可能是由于异步加载或加载顺序不正确引起的。解决这个问题的方法如下： 确保引用的js文件路径是正确的，并且文件已经成功加载到页面中。

vue调用动态组件的内部方法就是在副页面导入固定的代码，添加对应的逐渐并命名，将动态组件作为参数进行输出，有一个js文件，需要调用vue内部methods中的方法，可以将vue中的方法当作参数传出来。

将打包后的dist文件夹复制到Vue项目中：将另一个JS项目打包后生成的dist文件夹复制到Vue项目的根目录下，或者将其放置在Vue项目的静态资源文件夹（如public或assets）中。

如何在.vue文件中引入外部js

在Vue 3项目中，如果你想引用位于public目录下的JavaScript文件，你可以通过以下步骤进行：

1、将JavaScript文件放入public目录：将你的.js文件放在项目的public目录中。


2、在public/index.html中引入：在项目的public/index.html文件中，使用<script>标签来引入这个文件。由于文件位于public目录，你可以直接通过相对路径引用它。

<!-- public/index.html -->
<script src="/path/to/your/script.js"></script>


3、确保在Vue应用加载前执行：如果你想确保在Vue应用加载之前执行这个脚本，你应该将<script>标签放在<body>标签的底部，紧接在Vue应用的挂载点之前。

<!-- 在Vue挂载点之前 -->
<script src="/path/to/your/script.js"></script>
<div id="app"></div>


4、使用全局变量：如果你的.js文件定义了全局变量或函数，它们将自动在全局作用域中可用，你可以在Vue组件中直接使用它们。


请注意，由于public目录中的文件在构建过程中会被复制到输出目录的根目录，它们不会被Webpack处理。这意味着你不能使用模块化的方式（例如import语句）来引入这些文件，而应该使用上面的方法通过<script>标签直接在HTML中引用它们。


如果你需要在Vue组件内部访问这些脚本中定义的变量或函数，确保这些变量或函数是全局作用域中定义的，这样你就可以在组件的<template>、<script>或<style>中直接使用它们。




版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：js JavaScript 输出
上一篇:配置jquery环境的标签是什么(jquery设置标签的属性)
下一篇:imp导入乱码怎么办
相关文章