vue怎么全局加载js

在Vue项目中，全局加载JS文件的方法有：在main.js中引入、使用Vue CLI插件、在模板文件中引入。 其中，在main.js中引入是最常用且推荐的方法，因为它简单且能够确保JS文件在应用启动时就被加载。下面详细描述这个方法。

在main.js中引入

在Vue项目的main.js文件中，我们可以通过import或者require语句来引入全局的JS文件。这种方法可以确保在Vue实例创建之前，所需的JS文件已经被加载。

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局JS文件
import './path/to/your/global.js'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

一、在main.js中引入

在main.js文件中引入JS文件是最直接且简便的方法。这种方式可以确保JS文件在整个Vue应用生命周期内都可用。以下是详细步骤：

创建一个全局JS文件
假设你有一个名为global.js的JS文件，放置在src目录下。

// src/global.js
console.log('Global JS file loaded');
// 定义一些全局函数或变量
window.globalFunction = function() {
  console.log('This is a global function');
}

在main.js中引入这个文件
使用import或require语句将全局JS文件引入到main.js中。

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局JS文件
import './global.js'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

通过这种方式，global.js中的所有内容将在Vue应用启动时加载，并且在整个应用中都可用。

二、使用Vue CLI插件

Vue CLI提供了许多插件，可以帮助我们更方便地处理全局资源的加载。比如，可以使用vue-cli-plugin-global-js插件来自动引入全局JS文件。

安装插件
```
vue add global-js
```

配置插件

安装插件后，会在项目根目录下生成一个vue.config.js文件，你可以在其中配置全局JS文件的路径。

// vue.config.js
module.exports = {
  pluginOptions: {
    globalJs: {
      files: [
        './src/global.js'
      ]
    }
  }
}

三、在模板文件中引入

有时候，我们可能只需要在特定的模板中引入JS文件。此时，可以在模板文件的<script>标签中使用src属性引入外部JS文件。

<!-- src/components/YourComponent.vue -->
<template>
  <div>
    Your Component
  </div>
</template>
<script src="../path/to/your/global.js"></script>
<script>
export default {
  name: 'YourComponent'
}
</script>

这种方法通常用于引入第三方库或插件，但不推荐用于引入需要在全局范围内使用的自定义JS文件，因为这样可能导致代码重复和管理困难。

四、在公共组件库中引入

如果你的项目中有一个公共组件库，那么可以在这个组件库的入口文件中引入全局JS文件。这种方法适用于大型项目，特别是那些使用了模块化结构的项目。

创建一个公共组件库

假设你有一个名为common的公共组件库，放置在src目录下。

// src/common/index.js
import './global.js';
export { default as ComponentA } from './ComponentA.vue';
export { default as ComponentB } from './ComponentB.vue';

在项目中引入公共组件库

在main.js中引入这个公共组件库。

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as CommonComponents from './common'
Vue.config.productionTip = false
Object.keys(CommonComponents).forEach(key => {
  Vue.component(key, CommonComponents[key]);
});
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

通过这种方式，全局JS文件会在公共组件库被引入时自动加载，从而确保在整个应用中都可用。

五、在Vuex中引入

如果你的项目使用了Vuex进行状态管理，也可以在Vuex的store文件中引入全局JS文件。这种方法适用于需要在状态管理中使用全局函数或变量的情况。

创建一个Vuex store

假设你有一个名为store.js的Vuex store文件，放置在src目录下。

// src/store.js
import Vue from 'vue'
import Vuex from 'vuex'
// 引入全局JS文件
import './global.js'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

在main.js中引入Vuex store

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

通过这种方式，全局JS文件会在Vuex store被引入时自动加载，从而确保在整个应用中都可用。

六、使用Webpack的ProvidePlugin

Webpack的ProvidePlugin可以自动加载模块，而不需要在每个文件中手动引入。这种方法适用于使用Vue CLI构建的项目。

安装Webpack的ProvidePlugin
```
npm install --save-dev webpack
```

配置ProvidePlugin

在vue.config.js文件中配置ProvidePlugin。

// vue.config.js
const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        _: 'lodash'
      })
    ]
  }
}

通过这种方式，lodash库将自动加载到每个模块中，而不需要手动引入。

总结

在Vue项目中，全局加载JS文件的方法有很多，具体选择哪种方法取决于你的项目需求和使用场景。在main.js中引入是最常用且推荐的方法，因为它简单且能够确保JS文件在应用启动时就被加载。其他方法如使用Vue CLI插件、在模板文件中引入、在公共组件库中引入、在Vuex中引入以及使用Webpack的ProvidePlugin，可以根据具体需求进行选择和组合。通过合理的组织和管理，可以确保全局JS文件在项目中高效、安全地使用。