Vue CLI项目中：如何正确引入本地JS文件并使用全局变量？

文件全局使用引入 881 来源： 2025-03-25

在Vue CLI项目中引入本地JS文件并使用全局变量

在Vue CLI项目中引入本地JS文件并使其全局可用有几种方法，下面我将介绍最常用的几种方式。

方法一：在public目录中引入并全局挂载

将你的JS文件放在public/js目录下（如果没有js目录可以创建）
在public/index.html中添加script标签引用：

<!DOCTYPE html>
<html>
  <head>
    <!-- ...其他head内容... -->
  </head>
  <body>
    <div id="app"></div>
    <!-- 引入本地JS文件 -->
    <script src="<%= BASE_URL %>js/your-library.js"></script>
  </body>
</html>

这样引入的JS文件中的全局变量可以在任何Vue组件中直接使用

方法二：通过webpack配置全局引入

将JS文件放在src/assets/js目录下
修改vue.config.js：

module.exports = {
  configureWebpack: {
    externals: {
      // 如果你需要排除某些库从打包
    },
    plugins: [
      // 可以添加webpack插件
    ]
  },
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      // 在这里定义全局变量
      yourGlobalVar: path.resolve(path.join(__dirname, 'src/assets/js/your-library.js'))
    }])
  }
}

方法三：在main.js中导入并挂载到Vue原型

将JS文件放在src/assets/js目录下
在src/main.js中：

import Vue from 'vue'
import App from './App.vue'
import * as yourLibrary from '@/assets/js/your-library'

// 挂载到Vue原型
Vue.prototype.$yourLibrary = yourLibrary

new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中使用：

export default {
  mounted() {
    this.$yourLibrary.someFunction()
  }
}

方法四：使用ES6模块导入

将JS文件放在src/assets/js目录下
确保你的JS文件使用ES6导出：

// your-library.js
export const someFunction = () => {
  console.log('This is a function from local JS')
}

export default {
  someFunction
}

在组件中按需导入：

import { someFunction } from '@/assets/js/your-library'

export default {
  mounted() {
    someFunction()
  }
}

注意事项

如果JS文件不是模块化的（使用全局变量），方法一是最简单的
对于现代开发，推荐使用方法四（ES6模块）以保持代码的模块化和可维护性
如果JS文件很大，考虑使用方法一或使用webpack的externals配置
确保JS文件是安全的，全局变量可能会污染全局命名空间

最佳实践建议

对于现代Vue CLI项目，推荐：

将第三方库通过npm安装
对于必须使用的本地JS文件，优先使用方法四（ES6模块导入）
如果必须使用全局变量，考虑将其挂载到Vue原型上（方法三）而不是直接使用window对象

希望这些方法能帮助你在Vue CLI项目中正确引入和使用本地JS文件！

上一篇：Vue3项目中Element Plus按钮样式失效了，该如何排查和解决？

下一篇：如何解决iframe嵌入视频网站后无法跨域全屏播放的问题？

Vue CLI项目中：如何正确引入本地JS文件并使用全局变量？

在Vue CLI项目中引入本地JS文件并使用全局变量

方法一：在public目录中引入并全局挂载

方法二：通过webpack配置全局引入

方法三：在main.js中导入并挂载到Vue原型

方法四：使用ES6模块导入

注意事项

最佳实践建议

推荐文章

热门文章